Formated Files

.github/dependabot.yml

@@ -14,4 +14,4 @@ updates:
     assignees:
       - 'ahmadk953'
     reviewers:
-      - 'ahmadk953'
+      - 'ahmadk953'

.github/workflows/build-lint.yml

@@ -1,29 +0,0 @@
-name: Build and Lint
-
-on: [push, pull_request]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [21.x]
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: yarn
-
-      - name: Build
-        run: |
-          npm install
-          npm run build
-
-      - name: Lint
-        run: |
-          npm run lint

actions/copy-card/index.ts

@@ -1,20 +1,20 @@
-"use server";
+'use server';
 
-import { auth } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
-import { ACTION, ENTITY_TYPE } from "@prisma/client";
+import { auth } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
+import { ACTION, ENTITY_TYPE } from '@prisma/client';
 
-import { db } from "@/lib/db";
-import { createAuditLog } from "@/lib/create-audit-log"; 
-import { createSafeAction } from "@/lib/create-safe-action";
+import { db } from '@/lib/db';
+import { createAuditLog } from '@/lib/create-audit-log';
+import { createSafeAction } from '@/lib/create-safe-action';
 
-import { InputType, ReturnType } from "./types";
-import { CopyCard } from "./schema";
+import { InputType, ReturnType } from './types';
+import { CopyCard } from './schema';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
 
-  if (!userId || !orgId) return { error: "Unauthorized" };
+  if (!userId || !orgId) return { error: 'Unauthorized' };
 
   const { id, boardId } = data;
   let card;
@@ -31,11 +31,11 @@ const handler = async (data: InputType): Promise<ReturnType> => {
       },
     });
 
-    if (!cardToCopy) return { error: "Card not found" };
+    if (!cardToCopy) return { error: 'Card not found' };
 
     const lastCard = await db.card.findFirst({
       where: { listId: cardToCopy.listId },
-      orderBy: { order: "desc" },
+      orderBy: { order: 'desc' },
       select: { order: true },
     });
 
@@ -47,8 +47,8 @@ const handler = async (data: InputType): Promise<ReturnType> => {
         description: cardToCopy.description,
         order: newOrder,
         listId: cardToCopy.listId,
-      }
-    })
+      },
+    });
 
     await createAuditLog({
       entityTitle: card.title,
@@ -58,7 +58,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     });
   } catch (error) {
     return {
-      error: "Failed to copy card",
+      error: 'Failed to copy card',
     };
   }
 

actions/copy-card/schema.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const CopyCard = z.object({
   id: z.string(),

actions/copy-card/types.ts

@@ -1,9 +1,9 @@
-import { z } from "zod";
-import { Card } from "@prisma/client";
+import { z } from 'zod';
+import { Card } from '@prisma/client';
 
-import { ActionState } from "@/lib/create-safe-action";
+import { ActionState } from '@/lib/create-safe-action';
 
-import { CopyCard } from "./schema";
+import { CopyCard } from './schema';
 
 export type InputType = z.infer<typeof CopyCard>;
 export type ReturnType = ActionState<InputType, Card>;

actions/copy-list/index.ts

@@ -1,20 +1,20 @@
-"use server";
+'use server';
 
-import { auth } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
-import { ACTION, ENTITY_TYPE } from "@prisma/client";
+import { auth } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
+import { ACTION, ENTITY_TYPE } from '@prisma/client';
 
-import { db } from "@/lib/db";
-import { createAuditLog } from "@/lib/create-audit-log";
-import { createSafeAction } from "@/lib/create-safe-action";
+import { db } from '@/lib/db';
+import { createAuditLog } from '@/lib/create-audit-log';
+import { createSafeAction } from '@/lib/create-safe-action';
 
-import { InputType, ReturnType } from "./types";
-import { CopyList } from "./schema";
+import { InputType, ReturnType } from './types';
+import { CopyList } from './schema';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
 
-  if (!userId || !orgId) return { error: "Unauthorized" };
+  if (!userId || !orgId) return { error: 'Unauthorized' };
 
   const { id, boardId } = data;
   let list;
@@ -33,11 +33,11 @@ const handler = async (data: InputType): Promise<ReturnType> => {
       },
     });
 
-    if (!listToCopy) return { error: "List not found" };
+    if (!listToCopy) return { error: 'List not found' };
 
     const lastList = await db.list.findFirst({
       where: { boardId },
-      orderBy: { order: "desc" },
+      orderBy: { order: 'desc' },
       select: { order: true },
     });
 
@@ -71,7 +71,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     });
   } catch (error) {
     return {
-      error: "Failed to copy list",
+      error: 'Failed to copy list',
     };
   }
 

actions/copy-list/schema.ts

@@ -1,6 +1,6 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const CopyList = z.object({
   id: z.string(),
   boardId: z.string(),
-})
+});

actions/copy-list/types.ts

@@ -1,9 +1,9 @@
-import { z } from "zod";
-import { List } from "@prisma/client";
+import { z } from 'zod';
+import { List } from '@prisma/client';
 
-import { ActionState } from "@/lib/create-safe-action";
+import { ActionState } from '@/lib/create-safe-action';
 
-import { CopyList } from "./schema";
+import { CopyList } from './schema';
 
 export type InputType = z.infer<typeof CopyList>;
-export type ReturnType = ActionState<InputType, List>;
+export type ReturnType = ActionState<InputType, List>;

actions/create-board/index.ts

@@ -1,24 +1,24 @@
-"use server";
+'use server';
 
-import { auth } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
+import { auth } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
 
-import { db } from "@/lib/db";
-import { createSafeAction } from "@/lib/create-safe-action";
+import { db } from '@/lib/db';
+import { createSafeAction } from '@/lib/create-safe-action';
 
-import { InputType, ReturnType } from "./types";
-import { CreateBoard } from "./schema";
-import { createAuditLog } from "@/lib/create-audit-log";
-import { ACTION, ENTITY_TYPE } from "@prisma/client";
-import { incrementAvailableCount, hasAvailableCount } from "@/lib/org-limit";
-import { checkSubscription } from "@/lib/subscription";
+import { InputType, ReturnType } from './types';
+import { CreateBoard } from './schema';
+import { createAuditLog } from '@/lib/create-audit-log';
+import { ACTION, ENTITY_TYPE } from '@prisma/client';
+import { incrementAvailableCount, hasAvailableCount } from '@/lib/org-limit';
+import { checkSubscription } from '@/lib/subscription';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
 
   if (!userId || !orgId) {
     return {
-      error: "Unauthorized",
+      error: 'Unauthorized',
     };
   }
 
@@ -28,14 +28,14 @@ const handler = async (data: InputType): Promise<ReturnType> => {
   if (!canCreate && !isPro) {
     return {
       error:
-        "You have reached your limit of free boards. Please upgrade to create more.",
+        'You have reached your limit of free boards. Please upgrade to create more.',
     };
   }
 
   const { title, image } = data;
 
   const [imageId, imageThumbUrl, imageFullUrl, imageLinkHTML, imageUserName] =
-    image.split("|");
+    image.split('|');
 
   if (
     !imageId ||
@@ -45,7 +45,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     !imageLinkHTML
   ) {
     return {
-      error: "Missing fields. Failed to create board.",
+      error: 'Missing fields. Failed to create board.',
     };
   }
 
@@ -76,7 +76,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     });
   } catch (error) {
     return {
-      error: "Failed to create board",
+      error: 'Failed to create board',
     };
   }
 

actions/create-board/schema.ts

@@ -1,14 +1,16 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const CreateBoard = z.object({
-  title: z.string({
-    required_error: "Title is required",
-    invalid_type_error: "Title must be a string",
-  }).min(3, {
-    message: "Title must be at least 3 characters",
-  }),
+  title: z
+    .string({
+      required_error: 'Title is required',
+      invalid_type_error: 'Title must be a string',
+    })
+    .min(3, {
+      message: 'Title must be at least 3 characters',
+    }),
   image: z.string({
-    required_error: "Image is required",
-    invalid_type_error: "Image must be a string",
-  })
-});
+    required_error: 'Image is required',
+    invalid_type_error: 'Image must be a string',
+  }),
+});

actions/create-board/types.ts

@@ -1,8 +1,8 @@
-import { z } from "zod";
-import { Board } from "@prisma/client";
+import { z } from 'zod';
+import { Board } from '@prisma/client';
 
-import { ActionState } from "@/lib/create-safe-action";
-import { CreateBoard } from "./schema";
+import { ActionState } from '@/lib/create-safe-action';
+import { CreateBoard } from './schema';
 
 export type InputType = z.infer<typeof CreateBoard>;
 export type ReturnType = ActionState<InputType, Board>;

actions/create-card/index.ts

@@ -1,20 +1,20 @@
-"use server";
+'use server';
 
-import { auth } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
-import { ACTION, ENTITY_TYPE } from "@prisma/client";
+import { auth } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
+import { ACTION, ENTITY_TYPE } from '@prisma/client';
 
-import { db } from "@/lib/db";
-import { createAuditLog } from "@/lib/create-audit-log";
-import { createSafeAction } from "@/lib/create-safe-action";
+import { db } from '@/lib/db';
+import { createAuditLog } from '@/lib/create-audit-log';
+import { createSafeAction } from '@/lib/create-safe-action';
 
-import { InputType, ReturnType } from "./types";
-import { CreateCard } from "./schema";
+import { InputType, ReturnType } from './types';
+import { CreateCard } from './schema';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
 
-  if (!userId || !orgId) return { error: "Unauthorized" };
+  if (!userId || !orgId) return { error: 'Unauthorized' };
 
   const { title, boardId, listId } = data;
   let card;
@@ -29,11 +29,11 @@ const handler = async (data: InputType): Promise<ReturnType> => {
       },
     });
 
-    if (!list) return { error: "List not found" };
+    if (!list) return { error: 'List not found' };
 
     const lastCard = await db.card.findFirst({
       where: { listId },
-      orderBy: { order: "desc" },
+      orderBy: { order: 'desc' },
       select: { order: true },
     });
 
@@ -55,7 +55,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     });
   } catch (error) {
     return {
-      error: "Failed to create card",
+      error: 'Failed to create card',
     };
   }
 

actions/create-card/schema.ts

@@ -1,12 +1,14 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const CreateCard = z.object({
-  title: z.string({
-    required_error: "Card title is required",
-    invalid_type_error: "Card title must be a string",
-  }).min(2, {
-    message: "Card title must be at least 2 characters",
-  }),
+  title: z
+    .string({
+      required_error: 'Card title is required',
+      invalid_type_error: 'Card title must be a string',
+    })
+    .min(2, {
+      message: 'Card title must be at least 2 characters',
+    }),
   boardId: z.string(),
   listId: z.string(),
-})
+});

actions/create-card/types.ts

@@ -1,9 +1,9 @@
-import { z } from "zod";
-import { Card } from "@prisma/client";
+import { z } from 'zod';
+import { Card } from '@prisma/client';
 
-import { ActionState } from "@/lib/create-safe-action";
+import { ActionState } from '@/lib/create-safe-action';
 
-import { CreateCard } from "./schema";
+import { CreateCard } from './schema';
 
 export type InputType = z.infer<typeof CreateCard>;
 export type ReturnType = ActionState<InputType, Card>;

actions/create-list/index.ts

@@ -1,20 +1,20 @@
-"use server";
+'use server';
 
-import { auth } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
-import { ACTION, ENTITY_TYPE } from "@prisma/client";
+import { auth } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
+import { ACTION, ENTITY_TYPE } from '@prisma/client';
 
-import { db } from "@/lib/db";
-import { createAuditLog } from "@/lib/create-audit-log";
-import { createSafeAction } from "@/lib/create-safe-action";
+import { db } from '@/lib/db';
+import { createAuditLog } from '@/lib/create-audit-log';
+import { createSafeAction } from '@/lib/create-safe-action';
 
-import { InputType, ReturnType } from "./types";
-import { CreateList } from "./schema";
+import { InputType, ReturnType } from './types';
+import { CreateList } from './schema';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
 
-  if (!userId || !orgId) return { error: "Unauthorized" };
+  if (!userId || !orgId) return { error: 'Unauthorized' };
 
   const { title, boardId } = data;
   let list;
@@ -27,11 +27,11 @@ const handler = async (data: InputType): Promise<ReturnType> => {
       },
     });
 
-    if (!board) return { error: "Board not found" };
+    if (!board) return { error: 'Board not found' };
 
     const lastList = await db.list.findFirst({
       where: { boardId: boardId },
-      orderBy: { order: "desc" },
+      orderBy: { order: 'desc' },
       select: { order: true },
     });
 
@@ -53,7 +53,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     });
   } catch (error) {
     return {
-      error: "Failed to create list",
+      error: 'Failed to create list',
     };
   }
 

actions/create-list/schema.ts

@@ -1,11 +1,13 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const CreateList = z.object({
-  title: z.string({
-    required_error: "List title is required",
-    invalid_type_error: "List title must be a string",
-  }).min(2, {
-    message: "List title must be at least 2 characters",
-  }),
+  title: z
+    .string({
+      required_error: 'List title is required',
+      invalid_type_error: 'List title must be a string',
+    })
+    .min(2, {
+      message: 'List title must be at least 2 characters',
+    }),
   boardId: z.string(),
-})
+});

actions/create-list/types.ts

@@ -1,9 +1,9 @@
-import { z } from "zod";
-import { List } from "@prisma/client";
+import { z } from 'zod';
+import { List } from '@prisma/client';
 
-import { ActionState } from "@/lib/create-safe-action";
+import { ActionState } from '@/lib/create-safe-action';
 
-import { CreateList } from "./schema";
+import { CreateList } from './schema';
 
-export type InputType = z.infer<typeof CreateList>; 
-export type ReturnType = ActionState<InputType, List>;
+export type InputType = z.infer<typeof CreateList>;
+export type ReturnType = ActionState<InputType, List>;

actions/delete-board/index.ts

@@ -1,23 +1,23 @@
-"use server";
+'use server';
 
-import { auth } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
-import { redirect } from "next/navigation";
-import { ACTION, ENTITY_TYPE } from "@prisma/client";
+import { auth } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+import { ACTION, ENTITY_TYPE } from '@prisma/client';
 
-import { db } from "@/lib/db";
-import { createAuditLog } from "@/lib/create-audit-log";
-import { createSafeAction } from "@/lib/create-safe-action";
-import { decreaseAvailableCount } from "@/lib/org-limit";
-import { checkSubscription } from "@/lib/subscription";
+import { db } from '@/lib/db';
+import { createAuditLog } from '@/lib/create-audit-log';
+import { createSafeAction } from '@/lib/create-safe-action';
+import { decreaseAvailableCount } from '@/lib/org-limit';
+import { checkSubscription } from '@/lib/subscription';
 
-import { InputType, ReturnType } from "./types";
-import { DeleteBoard } from "./schema";
+import { InputType, ReturnType } from './types';
+import { DeleteBoard } from './schema';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
 
-  if (!userId || !orgId) return { error: "Unauthorized" };
+  if (!userId || !orgId) return { error: 'Unauthorized' };
 
   const isPro = await checkSubscription();
 
@@ -44,7 +44,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     });
   } catch (error) {
     return {
-      error: "Failed to delete board",
+      error: 'Failed to delete board',
     };
   }
 

actions/delete-board/schema.ts

@@ -1,5 +1,5 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const DeleteBoard = z.object({
   id: z.string(),
-})
+});

actions/delete-board/types.ts

@@ -1,9 +1,9 @@
-import { z } from "zod";
-import { Board } from "@prisma/client";
+import { z } from 'zod';
+import { Board } from '@prisma/client';
 
-import { ActionState } from "@/lib/create-safe-action";
+import { ActionState } from '@/lib/create-safe-action';
 
-import { DeleteBoard } from "./schema";
+import { DeleteBoard } from './schema';
 
 export type InputType = z.infer<typeof DeleteBoard>;
-export type ReturnType = ActionState<InputType, Board>;
+export type ReturnType = ActionState<InputType, Board>;

actions/delete-card/index.ts

@@ -1,20 +1,20 @@
-"use server";
+'use server';
 
-import { auth } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
-import { ACTION, ENTITY_TYPE } from "@prisma/client";
+import { auth } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
+import { ACTION, ENTITY_TYPE } from '@prisma/client';
 
-import { db } from "@/lib/db";
-import { createAuditLog } from "@/lib/create-audit-log";
-import { createSafeAction } from "@/lib/create-safe-action";
+import { db } from '@/lib/db';
+import { createAuditLog } from '@/lib/create-audit-log';
+import { createSafeAction } from '@/lib/create-safe-action';
 
-import { InputType, ReturnType } from "./types";
-import { DeleteCard } from "./schema";
+import { InputType, ReturnType } from './types';
+import { DeleteCard } from './schema';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
 
-  if (!userId || !orgId) return { error: "Unauthorized" };
+  if (!userId || !orgId) return { error: 'Unauthorized' };
 
   const { id, boardId } = data;
   let card;
@@ -39,7 +39,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     });
   } catch (error) {
     return {
-      error: "Failed to delete card",
+      error: 'Failed to delete card',
     };
   }
 

actions/delete-card/schema.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const DeleteCard = z.object({
   id: z.string(),

actions/delete-card/types.ts

@@ -1,9 +1,9 @@
-import { z } from "zod";
-import { Card } from "@prisma/client";
+import { z } from 'zod';
+import { Card } from '@prisma/client';
 
-import { ActionState } from "@/lib/create-safe-action";
+import { ActionState } from '@/lib/create-safe-action';
 
-import { DeleteCard } from "./schema";
+import { DeleteCard } from './schema';
 
 export type InputType = z.infer<typeof DeleteCard>;
 export type ReturnType = ActionState<InputType, Card>;

actions/delete-list/index.ts

@@ -1,20 +1,20 @@
-"use server";
+'use server';
 
-import { auth } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
-import { ACTION, ENTITY_TYPE } from "@prisma/client";
+import { auth } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
+import { ACTION, ENTITY_TYPE } from '@prisma/client';
 
-import { db } from "@/lib/db";
-import { createAuditLog } from "@/lib/create-audit-log";
-import { createSafeAction } from "@/lib/create-safe-action";
+import { db } from '@/lib/db';
+import { createAuditLog } from '@/lib/create-audit-log';
+import { createSafeAction } from '@/lib/create-safe-action';
 
-import { InputType, ReturnType } from "./types";
-import { DeleteList } from "./schema";
+import { InputType, ReturnType } from './types';
+import { DeleteList } from './schema';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
 
-  if (!userId || !orgId) return { error: "Unauthorized" };
+  if (!userId || !orgId) return { error: 'Unauthorized' };
 
   const { id, boardId } = data;
   let list;
@@ -38,7 +38,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     });
   } catch (error) {
     return {
-      error: "Failed to delete list",
+      error: 'Failed to delete list',
     };
   }
 

actions/delete-list/schema.ts

@@ -1,6 +1,6 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const DeleteList = z.object({
   id: z.string(),
   boardId: z.string(),
-})
+});

actions/delete-list/types.ts

@@ -1,9 +1,9 @@
-import { z } from "zod";
-import { List } from "@prisma/client";
+import { z } from 'zod';
+import { List } from '@prisma/client';
 
-import { ActionState } from "@/lib/create-safe-action";
+import { ActionState } from '@/lib/create-safe-action';
 
-import { DeleteList } from "./schema";
+import { DeleteList } from './schema';
 
 export type InputType = z.infer<typeof DeleteList>;
-export type ReturnType = ActionState<InputType, List>;
+export type ReturnType = ActionState<InputType, List>;

actions/stripe-redirect/index.ts

@@ -1,25 +1,25 @@
-"use server";
+'use server';
 
-import { auth, currentUser } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
+import { auth, currentUser } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
 
-import { db } from "@/lib/db";
-import { createSafeAction } from "@/lib/create-safe-action";
-import { absoluteUrl } from "@/lib/utils";
-import { stripe } from "@/lib/stripe";
+import { db } from '@/lib/db';
+import { createSafeAction } from '@/lib/create-safe-action';
+import { absoluteUrl } from '@/lib/utils';
+import { stripe } from '@/lib/stripe';
 
-import { InputType, ReturnType } from "./types";
-import { StripeRedirect } from "./schema";
+import { InputType, ReturnType } from './types';
+import { StripeRedirect } from './schema';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
   const user = await currentUser();
 
-  if (!userId || !orgId || !user) return { error: "Unauthorized" };
+  if (!userId || !orgId || !user) return { error: 'Unauthorized' };
 
   const settingsUrl = absoluteUrl(`/organization/${orgId}`);
 
-  let url = "";
+  let url = '';
 
   try {
     const orgSubscription = await db.orgSubscription.findUnique({
@@ -37,20 +37,20 @@ const handler = async (data: InputType): Promise<ReturnType> => {
       const stripeSession = await stripe.checkout.sessions.create({
         success_url: settingsUrl,
         cancel_url: settingsUrl,
-        payment_method_types: ["card", "paypal"],
-        mode: "subscription",
-        billing_address_collection: "auto",
+        payment_method_types: ['card', 'paypal'],
+        mode: 'subscription',
+        billing_address_collection: 'auto',
         customer_email: user.emailAddresses[0].emailAddress,
         line_items: [
           {
             price_data: {
-              currency: "usd",
+              currency: 'usd',
               product_data: {
-                name: "Tasko Pro",
-                description: "Unlimited boards for your organization",
+                name: 'Tasko Pro',
+                description: 'Unlimited boards for your organization',
               },
               unit_amount: 2000,
-              recurring: { interval: "month" },
+              recurring: { interval: 'month' },
             },
             quantity: 1,
           },
@@ -60,11 +60,11 @@ const handler = async (data: InputType): Promise<ReturnType> => {
         },
       });
 
-      url = stripeSession.url ?? "";
+      url = stripeSession.url ?? '';
     }
   } catch (error) {
     return {
-      error: "Something went wrong",
+      error: 'Something went wrong',
     };
   }
 

actions/stripe-redirect/schema.ts

@@ -1,3 +1,3 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const StripeRedirect = z.object({});

actions/stripe-redirect/types.ts

@@ -1,8 +1,8 @@
-import { z } from "zod";
+import { z } from 'zod';
 
-import { ActionState } from "@/lib/create-safe-action";
+import { ActionState } from '@/lib/create-safe-action';
 
-import { StripeRedirect } from "./schema";
+import { StripeRedirect } from './schema';
 
 export type InputType = z.infer<typeof StripeRedirect>;
 export type ReturnType = ActionState<InputType, string>;

actions/update-board/index.ts

@@ -1,20 +1,20 @@
-"use server";
+'use server';
 
-import { auth } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
-import { ACTION, ENTITY_TYPE } from "@prisma/client";
+import { auth } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
+import { ACTION, ENTITY_TYPE } from '@prisma/client';
 
-import { db } from "@/lib/db";
-import { createAuditLog } from "@/lib/create-audit-log";
-import { createSafeAction } from "@/lib/create-safe-action";
+import { db } from '@/lib/db';
+import { createAuditLog } from '@/lib/create-audit-log';
+import { createSafeAction } from '@/lib/create-safe-action';
 
-import { InputType, ReturnType } from "./types";
-import { UpdateBoard } from "./schema";
+import { InputType, ReturnType } from './types';
+import { UpdateBoard } from './schema';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
 
-  if (!userId || !orgId) return { error: "Unauthorized" };
+  if (!userId || !orgId) return { error: 'Unauthorized' };
 
   const { title, id } = data;
   let board;
@@ -38,7 +38,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     });
   } catch (error) {
     return {
-      error: "Failed to update board",
+      error: 'Failed to update board',
     };
   }
 
@@ -46,4 +46,4 @@ const handler = async (data: InputType): Promise<ReturnType> => {
   return { data: board };
 };
 
-export const updateBoard = createSafeAction(UpdateBoard, handler);
+export const updateBoard = createSafeAction(UpdateBoard, handler);

actions/update-board/schema.ts

@@ -1,11 +1,13 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const UpdateBoard = z.object({
-  title: z.string({
-    required_error: "Title is required",
-    invalid_type_error: "Title must be a string",
-  }).min(3, {
-    message: "Title must be at least 3 characters",
-  }),
+  title: z
+    .string({
+      required_error: 'Title is required',
+      invalid_type_error: 'Title must be a string',
+    })
+    .min(3, {
+      message: 'Title must be at least 3 characters',
+    }),
   id: z.string(),
-})
+});

actions/update-board/types.ts

@@ -1,9 +1,9 @@
-import { z } from "zod";
-import { Board } from "@prisma/client";
+import { z } from 'zod';
+import { Board } from '@prisma/client';
 
-import { ActionState } from "@/lib/create-safe-action";
+import { ActionState } from '@/lib/create-safe-action';
 
-import { UpdateBoard } from "./schema";
+import { UpdateBoard } from './schema';
 
 export type InputType = z.infer<typeof UpdateBoard>;
-export type ReturnType = ActionState<InputType, Board>;
+export type ReturnType = ActionState<InputType, Board>;

actions/update-card-order/index.ts

@@ -1,18 +1,18 @@
-"use server";
+'use server';
 
-import { auth } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
+import { auth } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
 
-import { db } from "@/lib/db";
-import { createSafeAction } from "@/lib/create-safe-action";
+import { db } from '@/lib/db';
+import { createSafeAction } from '@/lib/create-safe-action';
 
-import { InputType, ReturnType } from "./types";
-import { UpdateCardOrder } from "./schema";
+import { InputType, ReturnType } from './types';
+import { UpdateCardOrder } from './schema';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
 
-  if (!userId || !orgId) return { error: "Unauthorized" };
+  if (!userId || !orgId) return { error: 'Unauthorized' };
 
   const { items, boardId } = data;
   let updatedCards;
@@ -38,7 +38,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     updatedCards = await db.$transaction(transaction);
   } catch (error) {
     return {
-      error: "Failed to reorder list",
+      error: 'Failed to reorder list',
     };
   }
 

actions/update-card-order/schema.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const UpdateCardOrder = z.object({
   items: z.array(

actions/update-card-order/types.ts

@@ -1,9 +1,9 @@
-import { z } from "zod";
-import { Card } from "@prisma/client";
+import { z } from 'zod';
+import { Card } from '@prisma/client';
 
-import { ActionState } from "@/lib/create-safe-action";
+import { ActionState } from '@/lib/create-safe-action';
 
-import { UpdateCardOrder } from "./schema";
+import { UpdateCardOrder } from './schema';
 
-export type InputType = z.infer<typeof UpdateCardOrder>; 
-export type ReturnType = ActionState<InputType, Card[]>;
+export type InputType = z.infer<typeof UpdateCardOrder>;
+export type ReturnType = ActionState<InputType, Card[]>;

actions/update-card/index.ts

@@ -1,20 +1,20 @@
-"use server";
+'use server';
 
-import { auth } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
-import { ACTION, ENTITY_TYPE } from "@prisma/client";
+import { auth } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
+import { ACTION, ENTITY_TYPE } from '@prisma/client';
 
-import { db } from "@/lib/db";
-import { createAuditLog } from "@/lib/create-audit-log";
-import { createSafeAction } from "@/lib/create-safe-action";
+import { db } from '@/lib/db';
+import { createAuditLog } from '@/lib/create-audit-log';
+import { createSafeAction } from '@/lib/create-safe-action';
 
-import { InputType, ReturnType } from "./types";
-import { UpdateCard } from "./schema";
+import { InputType, ReturnType } from './types';
+import { UpdateCard } from './schema';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
 
-  if (!userId || !orgId) return { error: "Unauthorized" };
+  if (!userId || !orgId) return { error: 'Unauthorized' };
 
   const { id, boardId, ...values } = data;
   let card;
@@ -42,7 +42,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     });
   } catch (error) {
     return {
-      error: "Failed to update card",
+      error: 'Failed to update card',
     };
   }
 

actions/update-card/schema.ts

@@ -1,25 +1,25 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const UpdateCard = z.object({
   boardId: z.string(),
   description: z.optional(
     z
       .string({
-        invalid_type_error: "Description must be a string",
-        required_error: "Description is required",
+        invalid_type_error: 'Description must be a string',
+        required_error: 'Description is required',
       })
       .min(3, {
-        message: "Description must be at least 3 characters",
+        message: 'Description must be at least 3 characters',
       })
   ),
   title: z.optional(
     z
       .string({
-        required_error: "Title is required",
-        invalid_type_error: "Title must be a string",
+        required_error: 'Title is required',
+        invalid_type_error: 'Title must be a string',
       })
       .min(3, {
-        message: "Title must be at least 3 characters",
+        message: 'Title must be at least 3 characters',
       })
   ),
   id: z.string(),

actions/update-card/types.ts

@@ -1,9 +1,9 @@
-import { z } from "zod";
-import { Card } from "@prisma/client";
+import { z } from 'zod';
+import { Card } from '@prisma/client';
 
-import { ActionState } from "@/lib/create-safe-action";
+import { ActionState } from '@/lib/create-safe-action';
 
-import { UpdateCard } from "./schema";
+import { UpdateCard } from './schema';
 
 export type InputType = z.infer<typeof UpdateCard>;
-export type ReturnType = ActionState<InputType, Card>;
+export type ReturnType = ActionState<InputType, Card>;

actions/update-list-order/index.ts

@@ -1,18 +1,18 @@
-"use server";
+'use server';
 
-import { auth } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
+import { auth } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
 
-import { db } from "@/lib/db";
-import { createSafeAction } from "@/lib/create-safe-action";
+import { db } from '@/lib/db';
+import { createSafeAction } from '@/lib/create-safe-action';
 
-import { InputType, ReturnType } from "./types";
-import { UpdateListOrder } from "./schema";
+import { InputType, ReturnType } from './types';
+import { UpdateListOrder } from './schema';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
 
-  if (!userId || !orgId) return { error: "Unauthorized" };
+  if (!userId || !orgId) return { error: 'Unauthorized' };
 
   const { items, boardId } = data;
   let lists;
@@ -35,7 +35,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     lists = await db.$transaction(transaction);
   } catch (error) {
     return {
-      error: "Failed to reorder list",
+      error: 'Failed to reorder list',
     };
   }
 

actions/update-list-order/schema.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const UpdateListOrder = z.object({
   items: z.array(

actions/update-list-order/types.ts

@@ -1,9 +1,9 @@
-import { z } from "zod";
-import { List } from "@prisma/client";
+import { z } from 'zod';
+import { List } from '@prisma/client';
 
-import { ActionState } from "@/lib/create-safe-action";
+import { ActionState } from '@/lib/create-safe-action';
 
-import { UpdateListOrder } from "./schema";
+import { UpdateListOrder } from './schema';
 
-export type InputType = z.infer<typeof UpdateListOrder>; 
-export type ReturnType = ActionState<InputType, List[]>;
+export type InputType = z.infer<typeof UpdateListOrder>;
+export type ReturnType = ActionState<InputType, List[]>;

actions/update-list/index.ts

@@ -1,20 +1,20 @@
-"use server";
+'use server';
 
-import { auth } from "@clerk/nextjs";
-import { revalidatePath } from "next/cache";
-import { ACTION, ENTITY_TYPE } from "@prisma/client";
+import { auth } from '@clerk/nextjs';
+import { revalidatePath } from 'next/cache';
+import { ACTION, ENTITY_TYPE } from '@prisma/client';
 
-import { db } from "@/lib/db";
-import { createAuditLog } from "@/lib/create-audit-log";
-import { createSafeAction } from "@/lib/create-safe-action";
+import { db } from '@/lib/db';
+import { createAuditLog } from '@/lib/create-audit-log';
+import { createSafeAction } from '@/lib/create-safe-action';
 
-import { InputType, ReturnType } from "./types";
-import { UpdateList } from "./schema";
+import { InputType, ReturnType } from './types';
+import { UpdateList } from './schema';
 
 const handler = async (data: InputType): Promise<ReturnType> => {
   const { userId, orgId } = auth();
 
-  if (!userId || !orgId) return { error: "Unauthorized" };
+  if (!userId || !orgId) return { error: 'Unauthorized' };
 
   const { title, id, boardId } = data;
   let list;
@@ -41,7 +41,7 @@ const handler = async (data: InputType): Promise<ReturnType> => {
     });
   } catch (error) {
     return {
-      error: "Failed to update list",
+      error: 'Failed to update list',
     };
   }
 

actions/update-list/schema.ts

@@ -1,12 +1,14 @@
-import { z } from "zod";
+import { z } from 'zod';
 
 export const UpdateList = z.object({
-  title: z.string({
-    required_error: "Title is required",
-    invalid_type_error: "Title must be a string",
-  }).min(2, {
-    message: "Title must be at least 2 characters",
-  }),
+  title: z
+    .string({
+      required_error: 'Title is required',
+      invalid_type_error: 'Title must be a string',
+    })
+    .min(2, {
+      message: 'Title must be at least 2 characters',
+    }),
   id: z.string(),
   boardId: z.string(),
-})
+});

actions/update-list/types.ts

@@ -1,9 +1,9 @@
-import { z } from "zod";
-import { List } from "@prisma/client";
+import { z } from 'zod';
+import { List } from '@prisma/client';
 
-import { ActionState } from "@/lib/create-safe-action";
+import { ActionState } from '@/lib/create-safe-action';
 
-import { UpdateList } from "./schema";
+import { UpdateList } from './schema';
 
 export type InputType = z.infer<typeof UpdateList>;
-export type ReturnType = ActionState<InputType, List>;
+export type ReturnType = ActionState<InputType, List>;

app/(marketing)/_components/footer.tsx

@@ -1,16 +1,16 @@
-import { Logo } from "@/components/logo";
-import { Button } from "@/components/ui/button";
+import { Logo } from '@/components/logo';
+import { Button } from '@/components/ui/button';
 
 export const Footer = () => {
   return (
-    <div className="fixed bottom-0 w-full p-4 border-t bg-slate-100">
-      <div className="md:max-w-screen-2xl mx-auto flex items-center w-full justify-between">
+    <div className='fixed bottom-0 w-full border-t bg-slate-100 p-4'>
+      <div className='mx-auto flex w-full items-center justify-between md:max-w-screen-2xl'>
         <Logo />
-        <div className="space-x-4 md:block md:w-auto flex items-center justify-between w-full">
-          <Button size="sm" variant="ghost">
+        <div className='flex w-full items-center justify-between space-x-4 md:block md:w-auto'>
+          <Button size='sm' variant='ghost'>
             Privacy Policy
           </Button>
-          <Button size="sm" variant="ghost">
+          <Button size='sm' variant='ghost'>
             Terms of Service
           </Button>
         </div>

app/(marketing)/_components/navbar.tsx

@@ -1,18 +1,18 @@
-import { Logo } from "@/components/logo";
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
+import { Logo } from '@/components/logo';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
 
 export const Navbar = () => {
   return (
-    <div className="fixed top-0 w-full h-14 px-4 border-b shadow-sm bg-white flex items-center">
-      <div className="md:max-w-screen-2xl mx-auto flex items-center w-full justify-between">
+    <div className='fixed top-0 flex h-14 w-full items-center border-b bg-white px-4 shadow-sm'>
+      <div className='mx-auto flex w-full items-center justify-between md:max-w-screen-2xl'>
         <Logo />
-        <div className="space-x-4 md:block md:w-auto flex items-center justify-between w-full">
-          <Button size="sm" variant="outline" asChild>
-            <Link href="sign-in">Login</Link>
+        <div className='flex w-full items-center justify-between space-x-4 md:block md:w-auto'>
+          <Button size='sm' variant='outline' asChild>
+            <Link href='sign-in'>Login</Link>
           </Button>
-          <Button size="sm" asChild>
-            <Link href="sign-up">Get Tasko for Free</Link>
+          <Button size='sm' asChild>
+            <Link href='sign-up'>Get Tasko for Free</Link>
           </Button>
         </div>
       </div>

app/(marketing)/layout.tsx

@@ -1,11 +1,11 @@
-import { Footer } from "./_components/footer";
-import { Navbar } from "./_components/navbar";
+import { Footer } from './_components/footer';
+import { Navbar } from './_components/navbar';
 
 const MarketingLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="h-full bg-slate-100">
+    <div className='h-full bg-slate-100'>
       <Navbar />
-      <main className="pt-40 pb-20 bg-slate-100">{children}</main>
+      <main className='bg-slate-100 pb-20 pt-40'>{children}</main>
       <Footer />
     </div>
   );

app/(marketing)/page.tsx

@@ -1,42 +1,42 @@
-import { Medal } from "lucide-react";
-import localFont from "next/font/local";
-import { Poppins } from "next/font/google";
-import Link from "next/link";
+import { Medal } from 'lucide-react';
+import localFont from 'next/font/local';
+import { Poppins } from 'next/font/google';
+import Link from 'next/link';
 
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import Image from "next/image";
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import Image from 'next/image';
 
-const headingFont = localFont({ src: "../../public/fonts/font.woff2" });
+const headingFont = localFont({ src: '../../public/fonts/font.woff2' });
 
 const textFont = Poppins({
-  subsets: ["latin"],
-  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+  subsets: ['latin'],
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
 });
 
 const MarketingPage = () => {
   return (
-    <div className="flex items-center justify-center flex-col">
+    <div className='flex flex-col items-center justify-center'>
       <div
         className={cn(
-          "flex items-center justify-center flex-col",
+          'flex flex-col items-center justify-center',
           headingFont.className
         )}
       >
-        <div className="mb-4 flex items-center border shadow-sm p-4 bg-amber-100 text-amber-700 rounded-full uppercase">
-          <Medal className="h-6 w-6 mr-2" />
+        <div className='mb-4 flex items-center rounded-full border bg-amber-100 p-4 uppercase text-amber-700 shadow-sm'>
+          <Medal className='mr-2 h-6 w-6' />
           No 1 task management app
         </div>
-        <h1 className="text-3xl md:text-6xl text-center text-neutral-800 mb-6">
+        <h1 className='mb-6 text-center text-3xl text-neutral-800 md:text-6xl'>
           Tasko helps teams move
         </h1>
-        <div className="text-3xl md:text-6xl bg-gradient-to-r from-fuchsia-600 to-pink-600 text-white px-4 p-2 rounded-md pb-4 w-fit">
+        <div className='w-fit rounded-md bg-gradient-to-r from-fuchsia-600 to-pink-600 p-2 px-4 pb-4 text-3xl text-white md:text-6xl'>
           Work forward
         </div>
       </div>
       <div
         className={cn(
-          "text-sm md:text-xl text-neutral-400 mt-4 max-w-xs md:max-w-2xl text-center mx-auto",
+          'mx-auto mt-4 max-w-xs text-center text-sm text-neutral-400 md:max-w-2xl md:text-xl',
           textFont.className
         )}
       >
@@ -44,8 +44,8 @@ const MarketingPage = () => {
         high rises to the home office, the way your team works is unique -
         accomplish it all with Tasko.
       </div>
-      <Button className="mt-6" size="lg" asChild>
-        <Link href="/sign-up">Get Tasko for free</Link>
+      <Button className='mt-6' size='lg' asChild>
+        <Link href='/sign-up'>Get Tasko for free</Link>
       </Button>
     </div>
   );

app/(platform)/(clerk)/layout.tsx

@@ -1,9 +1,7 @@
 const ClerkLayout = ({ children }: { children: React.ReactNode }) => {
-    return (
-        <div className="h-full flex items-center justify-center">
-            {children}
-        </div>
-    )
-}
+  return (
+    <div className='flex h-full items-center justify-center'>{children}</div>
+  );
+};
 
-export default ClerkLayout;
+export default ClerkLayout;

app/(platform)/(clerk)/select-org/[[...select-org]]/page.tsx

@@ -1,11 +1,11 @@
-import { OrganizationList } from "@clerk/nextjs";
+import { OrganizationList } from '@clerk/nextjs';
 
 export default function CreateOrganizationPage() {
   return (
     <OrganizationList
       hidePersonal
-      afterSelectOrganizationUrl="/organization/:id"
-      afterCreateOrganizationUrl="/organization/:id"
+      afterSelectOrganizationUrl='/organization/:id'
+      afterCreateOrganizationUrl='/organization/:id'
     />
   );
 }

app/(platform)/(clerk)/sign-in/[[...signin]]/page.tsx

@@ -1,4 +1,4 @@
-import { SignIn } from "@clerk/nextjs";
+import { SignIn } from '@clerk/nextjs';
 
 export default function Page() {
   return <SignIn />;

app/(platform)/(clerk)/sign-up/[[...sign-up]]/page.tsx

@@ -1,4 +1,4 @@
-import { SignUp } from "@clerk/nextjs";
+import { SignUp } from '@clerk/nextjs';
 
 export default function Page() {
   return <SignUp />;

app/(platform)/(dashboard)/_components/Navbar.tsx

@@ -1,57 +1,57 @@
-import { Plus } from "lucide-react";
-import { OrganizationSwitcher, UserButton } from "@clerk/nextjs";
+import { Plus } from 'lucide-react';
+import { OrganizationSwitcher, UserButton } from '@clerk/nextjs';
 
-import { Logo } from "@/components/logo";
-import { Button } from "@/components/ui/button";
-import { FormPopover } from "@/components/form/form-popover";
+import { Logo } from '@/components/logo';
+import { Button } from '@/components/ui/button';
+import { FormPopover } from '@/components/form/form-popover';
 
-import { MobileSidebar } from "./mobile-sidebar";
+import { MobileSidebar } from './mobile-sidebar';
 
 export const Navbar = () => {
   return (
-    <nav className="fixed z-50 top-0 px-4 w-full h-14 border-b shadow-sm bg-white flex items-center">
+    <nav className='fixed top-0 z-50 flex h-14 w-full items-center border-b bg-white px-4 shadow-sm'>
       <MobileSidebar />
-      <div className="flex items-center gap-x-4">
-        <div className="hidden md:flex">
+      <div className='flex items-center gap-x-4'>
+        <div className='hidden md:flex'>
           <Logo />
         </div>
-        <FormPopover align="start" side="bottom" sideOffset={18}>
+        <FormPopover align='start' side='bottom' sideOffset={18}>
           <Button
-            variant="primary"
-            size="sm"
-            className="rounded-sm hidden md:block h-auto py-1.5 px-2"
+            variant='primary'
+            size='sm'
+            className='hidden h-auto rounded-sm px-2 py-1.5 md:block'
           >
             Create
           </Button>
         </FormPopover>
         <FormPopover>
           <Button
-            variant="primary"
-            size="sm"
-            className="rounded-sm block md:hidden"
+            variant='primary'
+            size='sm'
+            className='block rounded-sm md:hidden'
           >
-            <Plus className="h-4 w-4" />
+            <Plus className='h-4 w-4' />
           </Button>
         </FormPopover>
       </div>
-      <div className="ml-auto flex items-center gap-x-2">
+      <div className='ml-auto flex items-center gap-x-2'>
         <OrganizationSwitcher
           hidePersonal
-          afterCreateOrganizationUrl="/organization/:id"
-          afterLeaveOrganizationUrl="/org-select"
-          afterSelectOrganizationUrl="/organization/:id"
+          afterCreateOrganizationUrl='/organization/:id'
+          afterLeaveOrganizationUrl='/org-select'
+          afterSelectOrganizationUrl='/organization/:id'
           appearance={{
             elements: {
               rootBox: {
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
               },
             },
           }}
         />
         <UserButton
-          afterSignOutUrl="/"
+          afterSignOutUrl='/'
           appearance={{
             elements: {
               avatarBox: {

app/(platform)/(dashboard)/_components/mobile-sidebar.tsx

@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import { Menu } from "lucide-react";
-import { usePathname } from "next/navigation";
-import { useMobileSidebar } from "@/hooks/use-mobile-sidebar";
+import { Menu } from 'lucide-react';
+import { usePathname } from 'next/navigation';
+import { useMobileSidebar } from '@/hooks/use-mobile-sidebar';
 
-import { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent } from "@/components/ui/sheet";
-import { Sidebar } from "./sidebar";
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent } from '@/components/ui/sheet';
+import { Sidebar } from './sidebar';
 
 export const MobileSidebar = () => {
   const pathname = usePathname();
@@ -33,15 +33,15 @@ export const MobileSidebar = () => {
     <>
       <Button
         onClick={onOpen}
-        className="block md:hidden mr-2"
-        variant="ghost"
-        size="sm"
+        className='mr-2 block md:hidden'
+        variant='ghost'
+        size='sm'
       >
-        <Menu className="h-4 w-4" />
+        <Menu className='h-4 w-4' />
       </Button>
       <Sheet open={isOpen} onOpenChange={onClose}>
-        <SheetContent side="left" className="p-2 pt-10">
-          <Sidebar storageKey="t-sidebar-mobile-state" />
+        <SheetContent side='left' className='p-2 pt-10'>
+          <Sidebar storageKey='t-sidebar-mobile-state' />
         </SheetContent>
       </Sheet>
     </>

app/(platform)/(dashboard)/_components/nav-item.tsx

@@ -1,17 +1,17 @@
-"use client";
+'use client';
 
-import Image from "next/image";
-import { Activity, CreditCard, Layout, Settings } from "lucide-react";
-import { usePathname, useRouter } from "next/navigation";
+import Image from 'next/image';
+import { Activity, CreditCard, Layout, Settings } from 'lucide-react';
+import { usePathname, useRouter } from 'next/navigation';
 
 import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
+} from '@/components/ui/accordion';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
 
 export type Organization = {
   id: string;
@@ -38,23 +38,23 @@ export const NavItem = ({
 
   const routes = [
     {
-      label: "Boards",
-      icon: <Layout className="h-4 w-4 mr-2" />,
+      label: 'Boards',
+      icon: <Layout className='mr-2 h-4 w-4' />,
       href: `/organization/${organization.id}`,
     },
     {
-      label: "Activity",
-      icon: <Activity className="h-4 w-4 mr-2" />,
+      label: 'Activity',
+      icon: <Activity className='mr-2 h-4 w-4' />,
       href: `/organization/${organization.id}/activity`,
     },
     {
-      label: "Settings",
-      icon: <Settings className="h-4 w-4 mr-2" />,
+      label: 'Settings',
+      icon: <Settings className='mr-2 h-4 w-4' />,
       href: `/organization/${organization.id}/settings`,
     },
     {
-      label: "Billing",
-      icon: <CreditCard className="h-4 w-4 mr-2" />,
+      label: 'Billing',
+      icon: <CreditCard className='mr-2 h-4 w-4' />,
       href: `/organization/${organization.id}/billing`,
     },
   ];
@@ -64,37 +64,37 @@ export const NavItem = ({
   };
 
   return (
-    <AccordionItem value={organization.id} className="border-none">
+    <AccordionItem value={organization.id} className='border-none'>
       <AccordionTrigger
         onClick={() => onExpand(organization.id)}
         className={cn(
-          "flex items-center gap-x-2 p-1.5 text-neutral-700 rounded-md hover:bg-neutral-500/10 transition text-start no-underline hover:no-underline",
-          isActive && !isExpanded && "bg-sky-500/10 text-sky-700"
+          'flex items-center gap-x-2 rounded-md p-1.5 text-start text-neutral-700 no-underline transition hover:bg-neutral-500/10 hover:no-underline',
+          isActive && !isExpanded && 'bg-sky-500/10 text-sky-700'
         )}
       >
-        <div className="flex items-center gap-x-2">
-          <div className="w-7 h-7 relative">
+        <div className='flex items-center gap-x-2'>
+          <div className='relative h-7 w-7'>
             <Image
               fill
               src={organization.imageUrl}
               alt={organization.name}
-              className="rounded-sm object-cover"
+              className='rounded-sm object-cover'
             />
           </div>
-          <span className="font-medium text-sm">{organization.name}</span>
+          <span className='text-sm font-medium'>{organization.name}</span>
         </div>
       </AccordionTrigger>
-      <AccordionContent className="pt-1 text-neutral-700">
+      <AccordionContent className='pt-1 text-neutral-700'>
         {routes.map((route) => (
           <Button
             key={route.href}
-            size="sm"
+            size='sm'
             onClick={() => onClick(route.href)}
             className={cn(
-              "w-full font-normal justify-start pl-10 mb-1",
-              pathname === route.href && "bg-sky-500/10 text-sky-700"
+              'mb-1 w-full justify-start pl-10 font-normal',
+              pathname === route.href && 'bg-sky-500/10 text-sky-700'
             )}
-            variant="ghost"
+            variant='ghost'
           >
             {route.icon}
             {route.label}
@@ -107,11 +107,11 @@ export const NavItem = ({
 
 NavItem.Skeleton = function SkeletonNavItem() {
   return (
-    <div className="flex items-center gap-x-2">
-      <div className="w-10 h-10 relative shrink-0">
-        <Skeleton className="h-full w-full absolute" />
+    <div className='flex items-center gap-x-2'>
+      <div className='relative h-10 w-10 shrink-0'>
+        <Skeleton className='absolute h-full w-full' />
       </div>
-      <Skeleton className="h-4 w-full" />
+      <Skeleton className='h-4 w-full' />
     </div>
   );
 };

app/(platform)/(dashboard)/_components/sidebar.tsx

@@ -1,21 +1,21 @@
-"use client";
+'use client';
 
-import Link from "next/link";
-import { Plus } from "lucide-react";
-import { useLocalStorage } from "usehooks-ts";
-import { useOrganizationList, useOrganization } from "@clerk/nextjs";
+import Link from 'next/link';
+import { Plus } from 'lucide-react';
+import { useLocalStorage } from 'usehooks-ts';
+import { useOrganizationList, useOrganization } from '@clerk/nextjs';
 
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { Accordion } from "@/components/ui/accordion";
-import { Skeleton } from "@/components/ui/skeleton";
-import { NavItem, Organization } from "./nav-item";
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { Accordion } from '@/components/ui/accordion';
+import { Skeleton } from '@/components/ui/skeleton';
+import { NavItem, Organization } from './nav-item';
 
 interface SidebarProps {
   storageKey?: string;
 }
 
-export const Sidebar = ({ storageKey = "t-sidebar-state" }: SidebarProps) => {
+export const Sidebar = ({ storageKey = 't-sidebar-state' }: SidebarProps) => {
   const [expanded, setExpanded] = useLocalStorage<Record<string, any>>(
     storageKey,
     {}
@@ -46,11 +46,11 @@ export const Sidebar = ({ storageKey = "t-sidebar-state" }: SidebarProps) => {
   if (!isLoadedOrgList || !isLoadedOrg || userMemberships.isLoading) {
     return (
       <>
-        <div className="flex items-center justify-between mb-2">
-          <Skeleton className="h-10 w-[50%]" />
-          <Skeleton className="h-10 w-10" />
+        <div className='mb-2 flex items-center justify-between'>
+          <Skeleton className='h-10 w-[50%]' />
+          <Skeleton className='h-10 w-10' />
         </div>
-        <div className="space-y-2">
+        <div className='space-y-2'>
           <NavItem.Skeleton />
           <NavItem.Skeleton />
           <NavItem.Skeleton />
@@ -61,24 +61,24 @@ export const Sidebar = ({ storageKey = "t-sidebar-state" }: SidebarProps) => {
 
   return (
     <>
-      <div className="font-medium text-xs flex items-center mb-1">
-        <span className="pl-4">Workspaces</span>
+      <div className='mb-1 flex items-center text-xs font-medium'>
+        <span className='pl-4'>Workspaces</span>
         <Button
           asChild
-          type="button"
-          size="icon"
-          variant="ghost"
-          className="ml-auto"
+          type='button'
+          size='icon'
+          variant='ghost'
+          className='ml-auto'
         >
-          <Link href="/select-org">
-            <Plus className="h-4 w-4" />
+          <Link href='/select-org'>
+            <Plus className='h-4 w-4' />
           </Link>
         </Button>
       </div>
       <Accordion
-        type="multiple"
+        type='multiple'
         defaultValue={defaultAccordionValue}
-        className="space-y-2"
+        className='space-y-2'
       >
         {userMemberships.data.map(({ organization }) => (
           <NavItem

app/(platform)/(dashboard)/board/[boardId]/_components/board-navbar.tsx

@@ -1,7 +1,7 @@
-import { Board } from "@prisma/client";
+import { Board } from '@prisma/client';
 
-import { BoardTitleForm } from "./board-title-form";
-import { BoardOptions } from "./board-options";
+import { BoardTitleForm } from './board-title-form';
+import { BoardOptions } from './board-options';
 
 interface BoardNavbarProps {
   data: Board;
@@ -9,9 +9,9 @@ interface BoardNavbarProps {
 
 export const BoardNavbar = async ({ data }: BoardNavbarProps) => {
   return (
-    <div className="w-full h-14 z-[40] bg-black/50 fixed top-14 flex items-center px-6 gap-x-4 text-white">
+    <div className='fixed top-14 z-[40] flex h-14 w-full items-center gap-x-4 bg-black/50 px-6 text-white'>
       <BoardTitleForm data={data} />
-      <div className="ml-auto">
+      <div className='ml-auto'>
         <BoardOptions id={data.id} />
       </div>
     </div>

app/(platform)/(dashboard)/board/[boardId]/_components/board-options.tsx

@@ -1,17 +1,17 @@
-"use client";
+'use client';
 
-import { MoreHorizontal, X } from "lucide-react";
-import { toast } from "sonner";
+import { MoreHorizontal, X } from 'lucide-react';
+import { toast } from 'sonner';
 
-import { deleteBoard } from "@/actions/delete-board";
-import { useAction } from "@/hooks/use-action";
-import { Button } from "@/components/ui/button";
+import { deleteBoard } from '@/actions/delete-board';
+import { useAction } from '@/hooks/use-action';
+import { Button } from '@/components/ui/button';
 import {
   Popover,
   PopoverClose,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover";
+} from '@/components/ui/popover';
 
 interface BoardOptionsProps {
   id: string;
@@ -31,27 +31,27 @@ export const BoardOptions = ({ id }: BoardOptionsProps) => {
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button className="h-auto w-auto p-2" variant="transparent">
-          <MoreHorizontal className="h-4 w-4" />
+        <Button className='h-auto w-auto p-2' variant='transparent'>
+          <MoreHorizontal className='h-4 w-4' />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="px-0 pt-3 pb-3" side="bottom" align="start">
-        <div className="text-sm font-medium text-center text-neutral-600 pb-4">
+      <PopoverContent className='px-0 pb-3 pt-3' side='bottom' align='start'>
+        <div className='pb-4 text-center text-sm font-medium text-neutral-600'>
           Board Actions
         </div>
         <PopoverClose asChild>
           <Button
-            className="h-auto w-auto p-2 absolute top-2 right-2 text-neutral-600"
-            variant="ghost"
+            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
+            variant='ghost'
           >
-            <X className="h-4 w-4" />
+            <X className='h-4 w-4' />
           </Button>
         </PopoverClose>
         <Button
-          variant="ghost"
+          variant='ghost'
           onClick={onDelete}
           disabled={isLoading}
-          className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm text-destructive hover:text-destructive"
+          className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive'
         >
           Delete this board
         </Button>

app/(platform)/(dashboard)/board/[boardId]/_components/board-title-form.tsx

@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import { toast } from "sonner";
-import { ElementRef, useRef, useState } from "react";
-import { Board } from "@prisma/client";
+import { toast } from 'sonner';
+import { ElementRef, useRef, useState } from 'react';
+import { Board } from '@prisma/client';
 
-import { Button } from "@/components/ui/button";
-import { FormInput } from "@/components/form/form-input";
-import { updateBoard } from "@/actions/update-board";
-import { useAction } from "@/hooks/use-action";
+import { Button } from '@/components/ui/button';
+import { FormInput } from '@/components/form/form-input';
+import { updateBoard } from '@/actions/update-board';
+import { useAction } from '@/hooks/use-action';
 
 interface BoardTitleFormProps {
   data: Board;
@@ -25,8 +25,8 @@ export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
     },
   });
 
-  const formRef = useRef<ElementRef<"form">>(null);
-  const inputRef = useRef<ElementRef<"input">>(null);
+  const formRef = useRef<ElementRef<'form'>>(null);
+  const inputRef = useRef<ElementRef<'input'>>(null);
 
   const [title, setTitle] = useState(data.title);
   const [isEditing, setIsEditing] = useState(false);
@@ -44,7 +44,7 @@ export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
   };
 
   const onSubmit = (formData: FormData) => {
-    const title = formData.get("title") as string;
+    const title = formData.get('title') as string;
 
     execute({
       title,
@@ -61,14 +61,14 @@ export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
       <form
         action={onSubmit}
         ref={formRef}
-        className="flex items-center gap-x-2"
+        className='flex items-center gap-x-2'
       >
         <FormInput
           ref={inputRef}
-          id="title"
+          id='title'
           onBlur={onBlur}
           defaultValue={title}
-          className="text-lg font-bold px-[7px] py-1 h-7 bg-transparent focus-visible:outline-none focus-visible:ring-transparent border-none"
+          className='h-7 border-none bg-transparent px-[7px] py-1 text-lg font-bold focus-visible:outline-none focus-visible:ring-transparent'
         />
       </form>
     );
@@ -77,8 +77,8 @@ export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
   return (
     <Button
       onClick={enableEditing}
-      variant="transparent"
-      className="font-bold text-lg h-auto w-auto p-1 px-2"
+      variant='transparent'
+      className='h-auto w-auto p-1 px-2 text-lg font-bold'
     >
       {title}
     </Button>

app/(platform)/(dashboard)/board/[boardId]/_components/card-form.tsx

@@ -1,16 +1,16 @@
-"use client";
+'use client';
 
-import { Plus, X } from "lucide-react";
-import { forwardRef, useRef, ElementRef, KeyboardEventHandler } from "react";
-import { useOnClickOutside, useEventListener } from "usehooks-ts";
-import { useParams } from "next/navigation";
-import { toast } from "sonner";
+import { Plus, X } from 'lucide-react';
+import { forwardRef, useRef, ElementRef, KeyboardEventHandler } from 'react';
+import { useOnClickOutside, useEventListener } from 'usehooks-ts';
+import { useParams } from 'next/navigation';
+import { toast } from 'sonner';
 
-import { useAction } from "@/hooks/use-action";
-import { createCard } from "@/actions/create-card";
-import { Button } from "@/components/ui/button";
-import { FormTextarea } from "@/components/form/form-textarea";
-import { FormSubmit } from "@/components/form/form-submit";
+import { useAction } from '@/hooks/use-action';
+import { createCard } from '@/actions/create-card';
+import { Button } from '@/components/ui/button';
+import { FormTextarea } from '@/components/form/form-textarea';
+import { FormSubmit } from '@/components/form/form-submit';
 
 interface CardFormProps {
   listId: string;
@@ -22,7 +22,7 @@ interface CardFormProps {
 export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
   ({ listId, isEditing, enableEditing, disableEditing }, ref) => {
     const params = useParams();
-    const formRef = useRef<ElementRef<"form">>(null);
+    const formRef = useRef<ElementRef<'form'>>(null);
 
     const { execute, fieldErrors } = useAction(createCard, {
       onSuccess: (data) => {
@@ -35,26 +35,26 @@ export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
     });
 
     const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
+      if (e.key === 'Escape') {
         disableEditing();
       }
     };
 
     useOnClickOutside(formRef, disableEditing);
-    useEventListener("keydown", onKeyDown);
+    useEventListener('keydown', onKeyDown);
 
     const onTextareaKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (
       e
     ) => {
-      if (e.key === "Enter" && !e.shiftKey) {
+      if (e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault();
         formRef.current?.requestSubmit();
       }
     };
 
     const onSubmit = (formData: FormData) => {
-      const title = formData.get("title") as string;
-      const listId = formData.get("listId") as string;
+      const title = formData.get('title') as string;
+      const listId = formData.get('listId') as string;
       const boardId = params.boardId as string;
 
       execute({ title, listId, boardId });
@@ -65,20 +65,20 @@ export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
         <form
           ref={formRef}
           action={onSubmit}
-          className="m-1 py-0.5 px-1 space-y-4"
+          className='m-1 space-y-4 px-1 py-0.5'
         >
           <FormTextarea
-            id="title"
+            id='title'
             onKeyDown={onTextareaKeyDown}
             ref={ref}
-            placeholder="Enter a title for this card..."
+            placeholder='Enter a title for this card...'
             errors={fieldErrors}
           />
-          <input hidden id="listId" name="listId" value={listId} />
-          <div className="flex items-center gap-x-1">
+          <input hidden id='listId' name='listId' value={listId} />
+          <div className='flex items-center gap-x-1'>
             <FormSubmit>Add card</FormSubmit>
-            <Button onClick={disableEditing} size="sm" variant="ghost">
-              <X className="w-5 h-5" />
+            <Button onClick={disableEditing} size='sm' variant='ghost'>
+              <X className='h-5 w-5' />
             </Button>
           </div>
         </form>
@@ -86,14 +86,14 @@ export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
     }
 
     return (
-      <div className="pt-2 px-2">
+      <div className='px-2 pt-2'>
         <Button
           onClick={enableEditing}
-          className="h-auto px-2 py-1.5 w-full justify-start text-muted-foreground text-sm"
-          size="sm"
-          variant="ghost"
+          className='h-auto w-full justify-start px-2 py-1.5 text-sm text-muted-foreground'
+          size='sm'
+          variant='ghost'
         >
-          <Plus className="h-4 w-4 mr-2" />
+          <Plus className='mr-2 h-4 w-4' />
           Add a card
         </Button>
       </div>
@@ -101,4 +101,4 @@ export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
   }
 );
 
-CardForm.displayName = "CardForm";
+CardForm.displayName = 'CardForm';

app/(platform)/(dashboard)/board/[boardId]/_components/card-item.tsx

@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import { Draggable } from "@hello-pangea/dnd";
-import { Card } from "@prisma/client";
+import { Draggable } from '@hello-pangea/dnd';
+import { Card } from '@prisma/client';
 
-import { useCardModal } from "@/hooks/use-card-modal";
+import { useCardModal } from '@/hooks/use-card-modal';
 
 interface CardItemProps {
   index: number;
@@ -20,9 +20,9 @@ export const CardItem = ({ index, data }: CardItemProps) => {
           {...provided.draggableProps}
           {...provided.dragHandleProps}
           ref={provided.innerRef}
-          role="button"
+          role='button'
           onClick={() => cardModal.onOpen(data.id)}
-          className="truncate border-2 border-transparent hover:border-black py-2 px-3 text-sm bg-white rounded-md shadow-sm"
+          className='truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm hover:border-black'
         >
           {data.title}
         </div>

app/(platform)/(dashboard)/board/[boardId]/_components/list-container.tsx

@@ -1,16 +1,16 @@
-"use client";
+'use client';
 
-import { useEffect, useState } from "react";
-import { DragDropContext, Droppable } from "@hello-pangea/dnd";
-import { toast } from "sonner";
+import { useEffect, useState } from 'react';
+import { DragDropContext, Droppable } from '@hello-pangea/dnd';
+import { toast } from 'sonner';
 
-import { useAction } from "@/hooks/use-action";
-import { updateListOrder } from "@/actions/update-list-order";
-import { updateCardOrder } from "@/actions/update-card-order";
-import { ListWithCards } from "@/types";
+import { useAction } from '@/hooks/use-action';
+import { updateListOrder } from '@/actions/update-list-order';
+import { updateCardOrder } from '@/actions/update-card-order';
+import { ListWithCards } from '@/types';
 
-import { ListForm } from "./list-form";
-import { ListItem } from "./list-item";
+import { ListForm } from './list-form';
+import { ListItem } from './list-item';
 
 interface ListContainerProps {
   data: ListWithCards[];
@@ -30,7 +30,7 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
 
   const { execute: executeUpdateListOrder } = useAction(updateListOrder, {
     onSuccess: () => {
-      toast.success("List reordered");
+      toast.success('List reordered');
     },
     onError: (error) => {
       toast.error(error);
@@ -39,7 +39,7 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
 
   const { execute: executeUpdateCardOrder } = useAction(updateCardOrder, {
     onSuccess: () => {
-      toast.success("Card reordered");
+      toast.success('Card reordered');
     },
     onError: (error) => {
       toast.error(error);
@@ -63,7 +63,7 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
       return;
 
     // User moves a list
-    if (type === "list") {
+    if (type === 'list') {
       const items = reorder(orderedData, source.index, destination.index).map(
         (item, index) => ({ ...item, order: index })
       );
@@ -72,7 +72,7 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
     }
 
     // User moves a card
-    if (type === "card") {
+    if (type === 'card') {
       let newOrderedData = [...orderedData];
 
       // Get source and destination list
@@ -142,19 +142,19 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
 
   return (
     <DragDropContext onDragEnd={onDragEnd}>
-      <Droppable droppableId="lists" type="list" direction="horizontal">
+      <Droppable droppableId='lists' type='list' direction='horizontal'>
         {(provided) => (
           <ol
             {...provided.droppableProps}
             ref={provided.innerRef}
-            className="flex gap-x-3 h-full"
+            className='flex h-full gap-x-3'
           >
             {orderedData.map((list, index) => {
               return <ListItem key={list.id} index={index} data={list} />;
             })}
             {provided.placeholder}
             <ListForm />
-            <div className="flex-shrink-0 w-1" />
+            <div className='w-1 flex-shrink-0' />
           </ol>
         )}
       </Droppable>

app/(platform)/(dashboard)/board/[boardId]/_components/list-form.tsx

@@ -1,25 +1,25 @@
-"use client";
+'use client';
 
-import { Plus, X } from "lucide-react";
-import { useState, useRef, ElementRef } from "react";
-import { useEventListener, useOnClickOutside } from "usehooks-ts";
-import { useParams, useRouter } from "next/navigation";
-import { toast } from "sonner";
+import { Plus, X } from 'lucide-react';
+import { useState, useRef, ElementRef } from 'react';
+import { useEventListener, useOnClickOutside } from 'usehooks-ts';
+import { useParams, useRouter } from 'next/navigation';
+import { toast } from 'sonner';
 
-import { FormInput } from "@/components/form/form-input";
-import { FormSubmit } from "@/components/form/form-submit";
-import { Button } from "@/components/ui/button";
-import { useAction } from "@/hooks/use-action";
-import { createList } from "@/actions/create-list";
+import { FormInput } from '@/components/form/form-input';
+import { FormSubmit } from '@/components/form/form-submit';
+import { Button } from '@/components/ui/button';
+import { useAction } from '@/hooks/use-action';
+import { createList } from '@/actions/create-list';
 
-import { ListWrapper } from "./list-wrapper";
+import { ListWrapper } from './list-wrapper';
 
 export const ListForm = () => {
   const router = useRouter();
   const params = useParams();
 
-  const formRef = useRef<ElementRef<"form">>(null);
-  const inputRef = useRef<ElementRef<"input">>(null);
+  const formRef = useRef<ElementRef<'form'>>(null);
+  const inputRef = useRef<ElementRef<'input'>>(null);
 
   const [isEditing, setIsEditing] = useState(false);
 
@@ -46,17 +46,17 @@ export const ListForm = () => {
   });
 
   const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === "Escape") {
+    if (e.key === 'Escape') {
       disableEditing();
     }
   };
 
-  useEventListener("keydown", onKeyDown);
+  useEventListener('keydown', onKeyDown);
   useOnClickOutside(formRef, disableEditing);
 
   const onSubmit = (formData: FormData) => {
-    const title = formData.get("title") as string;
-    const boardId = formData.get("boardId") as string;
+    const title = formData.get('title') as string;
+    const boardId = formData.get('boardId') as string;
 
     execute({ title, boardId });
   };
@@ -67,20 +67,20 @@ export const ListForm = () => {
         <form
           action={onSubmit}
           ref={formRef}
-          className="w-full p-3 rounded-md bg-white space-y-4 shadow-md"
+          className='w-full space-y-4 rounded-md bg-white p-3 shadow-md'
         >
           <FormInput
             ref={inputRef}
             errors={fieldErrors}
-            id="title"
-            className="text-sm px-2 py-1 h-7 font-medium border-transparent hover:border-input focus:border-input transition"
-            placeholder="Enter list title..."
+            id='title'
+            className='h-7 border-transparent px-2 py-1 text-sm font-medium transition hover:border-input focus:border-input'
+            placeholder='Enter list title...'
           />
-          <input hidden value={params.boardId} name="boardId" />
-          <div className="flex items-center gap-x-1">
+          <input hidden value={params.boardId} name='boardId' />
+          <div className='flex items-center gap-x-1'>
             <FormSubmit>Add list</FormSubmit>
-            <Button onClick={disableEditing} size="sm" variant="ghost">
-              <X className="h-5 w-5" />
+            <Button onClick={disableEditing} size='sm' variant='ghost'>
+              <X className='h-5 w-5' />
             </Button>
           </div>
         </form>
@@ -92,9 +92,9 @@ export const ListForm = () => {
     <ListWrapper>
       <button
         onClick={enableEditing}
-        className="w-full rounded-md bg-white/80 hover:bg-white/50 transition p-3 flex items-center font-medium text-sm"
+        className='flex w-full items-center rounded-md bg-white/80 p-3 text-sm font-medium transition hover:bg-white/50'
       >
-        <Plus className="h-4 w-4 mr-2" />
+        <Plus className='mr-2 h-4 w-4' />
         Add a list
       </button>
     </ListWrapper>

app/(platform)/(dashboard)/board/[boardId]/_components/list-header.tsx

@@ -1,15 +1,15 @@
-"use client";
+'use client';
 
-import { useState, useRef, ElementRef } from "react";
-import { useEventListener } from "usehooks-ts";
-import { List } from "@prisma/client";
-import { toast } from "sonner";
+import { useState, useRef, ElementRef } from 'react';
+import { useEventListener } from 'usehooks-ts';
+import { List } from '@prisma/client';
+import { toast } from 'sonner';
 
-import { FormInput } from "@/components/form/form-input";
-import { useAction } from "@/hooks/use-action";
-import { updateList } from "@/actions/update-list";
+import { FormInput } from '@/components/form/form-input';
+import { useAction } from '@/hooks/use-action';
+import { updateList } from '@/actions/update-list';
 
-import { ListOptions } from "./list-options";
+import { ListOptions } from './list-options';
 
 interface ListHeaderProps {
   data: List;
@@ -20,8 +20,8 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
   const [title, setTitle] = useState(data.title);
   const [isEditing, setIsEditing] = useState(false);
 
-  const formRef = useRef<ElementRef<"form">>(null);
-  const inputRef = useRef<ElementRef<"input">>(null);
+  const formRef = useRef<ElementRef<'form'>>(null);
+  const inputRef = useRef<ElementRef<'input'>>(null);
 
   const enableEditing = () => {
     setIsEditing(true);
@@ -47,9 +47,9 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
   });
 
   const onSubmit = (formData: FormData) => {
-    const title = formData.get("title") as string;
-    const id = formData.get("id") as string;
-    const boardId = formData.get("boardId") as string;
+    const title = formData.get('title') as string;
+    const id = formData.get('id') as string;
+    const boardId = formData.get('boardId') as string;
 
     if (title === data.title) return disableEditing();
 
@@ -57,7 +57,7 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
   };
 
   const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === "Escape") {
+    if (e.key === 'Escape') {
       formRef.current?.requestSubmit();
     }
   };
@@ -66,28 +66,28 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
     formRef.current?.requestSubmit();
   };
 
-  useEventListener("keydown", onKeyDown);
+  useEventListener('keydown', onKeyDown);
 
   return (
-    <div className="pt-2 px-2 text-sm font-semibold flex justify-between items-start gap-x-2">
+    <div className='flex items-start justify-between gap-x-2 px-2 pt-2 text-sm font-semibold'>
       {isEditing ? (
-        <form ref={formRef} action={onSubmit} className="flex-1 px-[2px]">
-          <input hidden id="id" name="id" value={data.id} />
-          <input hidden id="boardId" name="boardId" value={data.boardId} />
+        <form ref={formRef} action={onSubmit} className='flex-1 px-[2px]'>
+          <input hidden id='id' name='id' value={data.id} />
+          <input hidden id='boardId' name='boardId' value={data.boardId} />
           <FormInput
             ref={inputRef}
             onBlur={onBlur}
-            id="title"
-            placeholder="Enter list title..."
+            id='title'
+            placeholder='Enter list title...'
             defaultValue={title}
-            className="text-sm px-[7px] py-1 h-7 font-medium border-transparent hover:border-input focus:border-input transition truncate bg-transparent focus:bg-white"
+            className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium transition hover:border-input focus:border-input focus:bg-white'
           />
-          <button hidden type="submit" />
+          <button hidden type='submit' />
         </form>
       ) : (
         <div
           onClick={enableEditing}
-          className="w-full text-sm px-2.5 py-1 h-7 font-medium border-transparent"
+          className='h-7 w-full border-transparent px-2.5 py-1 text-sm font-medium'
         >
           {title}
         </div>

app/(platform)/(dashboard)/board/[boardId]/_components/list-item.tsx

@@ -1,14 +1,14 @@
-"use client";
+'use client';
 
-import { ElementRef, useRef, useState } from "react";
-import { Draggable, Droppable } from "@hello-pangea/dnd";
+import { ElementRef, useRef, useState } from 'react';
+import { Draggable, Droppable } from '@hello-pangea/dnd';
 
-import { ListWithCards } from "@/types";
-import { cn } from "@/lib/utils";
+import { ListWithCards } from '@/types';
+import { cn } from '@/lib/utils';
 
-import { ListHeader } from "./list-header";
-import { CardForm } from "./card-form";
-import { CardItem } from "./card-item";
+import { ListHeader } from './list-header';
+import { CardForm } from './card-form';
+import { CardItem } from './card-item';
 
 interface ListItemProps {
   data: ListWithCards;
@@ -16,7 +16,7 @@ interface ListItemProps {
 }
 
 export const ListItem = ({ index, data }: ListItemProps) => {
-  const textareaRef = useRef<ElementRef<"textarea">>(null);
+  const textareaRef = useRef<ElementRef<'textarea'>>(null);
 
   const [isEditing, setIsEditing] = useState(false);
 
@@ -37,21 +37,21 @@ export const ListItem = ({ index, data }: ListItemProps) => {
         <li
           {...provided.draggableProps}
           ref={provided.innerRef}
-          className="shrink-0 h-full w-[272px] select-none"
+          className='h-full w-[272px] shrink-0 select-none'
         >
           <div
             {...provided.dragHandleProps}
-            className="w-full rounded-md bg-[#f1f2f4] shadow-md pb-2"
+            className='w-full rounded-md bg-[#f1f2f4] pb-2 shadow-md'
           >
             <ListHeader onAddCard={enableEditing} data={data} />
-            <Droppable droppableId={data.id} type="card">
+            <Droppable droppableId={data.id} type='card'>
               {(provided) => (
                 <ol
                   ref={provided.innerRef}
                   {...provided.droppableProps}
                   className={cn(
-                    "mx-1 px-1 py-0.5 flex flex-col gap-y-2",
-                    data.cards.length > 0 ? "mt-2" : "mt-0"
+                    'mx-1 flex flex-col gap-y-2 px-1 py-0.5',
+                    data.cards.length > 0 ? 'mt-2' : 'mt-0'
                   )}
                 >
                   {data.cards.map((card, index) => (

app/(platform)/(dashboard)/board/[boardId]/_components/list-options.tsx

@@ -1,22 +1,22 @@
-"use client";
+'use client';
 
-import { MoreHorizontal, X } from "lucide-react";
-import { ElementRef, useRef } from "react";
-import { toast } from "sonner";
-import { List } from "@prisma/client";
+import { MoreHorizontal, X } from 'lucide-react';
+import { ElementRef, useRef } from 'react';
+import { toast } from 'sonner';
+import { List } from '@prisma/client';
 
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
   PopoverClose,
-} from "@/components/ui/popover";
-import { Button } from "@/components/ui/button";
-import { FormSubmit } from "@/components/form/form-submit";
-import { Separator } from "@/components/ui/separator";
-import { useAction } from "@/hooks/use-action";
-import { deleteList } from "@/actions/delete-list";
-import { copyList } from "@/actions/copy-list";
+} from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { FormSubmit } from '@/components/form/form-submit';
+import { Separator } from '@/components/ui/separator';
+import { useAction } from '@/hooks/use-action';
+import { deleteList } from '@/actions/delete-list';
+import { copyList } from '@/actions/copy-list';
 
 interface ListOptionsProps {
   data: List;
@@ -24,7 +24,7 @@ interface ListOptionsProps {
 }
 
 export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
-  const closeRef = useRef<ElementRef<"button">>(null);
+  const closeRef = useRef<ElementRef<'button'>>(null);
 
   const { execute: executeDelete } = useAction(deleteList, {
     onSuccess: () => {
@@ -47,15 +47,15 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
   });
 
   const onDelete = (formData: FormData) => {
-    const id = formData.get("id") as string;
-    const boardId = formData.get("boardId") as string;
+    const id = formData.get('id') as string;
+    const boardId = formData.get('boardId') as string;
 
     executeDelete({ id, boardId });
   };
 
   const onCopy = (formData: FormData) => {
-    const id = formData.get("id") as string;
-    const boardId = formData.get("boardId") as string;
+    const id = formData.get('id') as string;
+    const boardId = formData.get('boardId') as string;
 
     executeCopy({ id, boardId });
   };
@@ -63,46 +63,46 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button className="h-auto w-auto p-2" variant="ghost">
-          <MoreHorizontal className="h-4 w-4" />
+        <Button className='h-auto w-auto p-2' variant='ghost'>
+          <MoreHorizontal className='h-4 w-4' />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="px-0 pt-3 pb-3" side="bottom" align="start">
-        <div className="text-sm font-medium text-center text-neutral-600 pb-4">
+      <PopoverContent className='px-0 pb-3 pt-3' side='bottom' align='start'>
+        <div className='pb-4 text-center text-sm font-medium text-neutral-600'>
           List Actions
         </div>
         <PopoverClose ref={closeRef} asChild>
           <Button
-            className="h-auto w-auto p-2 absolute top-2 right-2 text-neutral-600"
-            variant="ghost"
+            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
+            variant='ghost'
           >
-            <X className="h-4 w-4" />
+            <X className='h-4 w-4' />
           </Button>
         </PopoverClose>
         <Button
           onClick={onAddCard}
-          className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm"
-          variant="ghost"
+          className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal'
+          variant='ghost'
         >
           Add card...
         </Button>
         <form action={onCopy}>
-          <input hidden name="id" id="id" value={data.id} />
-          <input hidden name="boardId" id="boardId" value={data.boardId} />
+          <input hidden name='id' id='id' value={data.id} />
+          <input hidden name='boardId' id='boardId' value={data.boardId} />
           <FormSubmit
-            className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm"
-            variant="ghost"
+            className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal'
+            variant='ghost'
           >
             Copy list...
           </FormSubmit>
         </form>
         <Separator />
         <form action={onDelete}>
-          <input hidden name="id" id="id" value={data.id} />
-          <input hidden name="boardId" id="boardId" value={data.boardId} />
+          <input hidden name='id' id='id' value={data.id} />
+          <input hidden name='boardId' id='boardId' value={data.boardId} />
           <FormSubmit
-            className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm text-destructive hover:text-destructive"
-            variant="ghost"
+            className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive'
+            variant='ghost'
           >
             Delete this list
           </FormSubmit>

app/(platform)/(dashboard)/board/[boardId]/_components/list-wrapper.tsx

@@ -3,5 +3,5 @@ interface ListWrapperProps {
 }
 
 export const ListWrapper = ({ children }: ListWrapperProps) => {
-  return <li className="shrink-0 h-full w-[272px] select-none">{children}</li>;
+  return <li className='h-full w-[272px] shrink-0 select-none'>{children}</li>;
 };

app/(platform)/(dashboard)/board/[boardId]/layout.tsx

@@ -1,8 +1,8 @@
-import { auth } from "@clerk/nextjs";
-import { notFound, redirect } from "next/navigation";
+import { auth } from '@clerk/nextjs';
+import { notFound, redirect } from 'next/navigation';
 
-import { db } from "@/lib/db";
-import { BoardNavbar } from "./_components/board-navbar";
+import { db } from '@/lib/db';
+import { BoardNavbar } from './_components/board-navbar';
 
 export async function generateMetadata({
   params,
@@ -11,7 +11,7 @@ export async function generateMetadata({
 }) {
   const { orgId } = auth();
 
-  if (!orgId) return { title: "Board" };
+  if (!orgId) return { title: 'Board' };
 
   const board = await db.board.findUnique({
     where: {
@@ -21,7 +21,7 @@ export async function generateMetadata({
   });
 
   return {
-    title: board?.title ?? "Board",
+    title: board?.title ?? 'Board',
   };
 }
 
@@ -34,7 +34,7 @@ const BoardIdLayout = async ({
 }) => {
   const { orgId } = auth();
 
-  if (!orgId) redirect("/select-org");
+  if (!orgId) redirect('/select-org');
 
   const board = await db.board.findUnique({
     where: {
@@ -47,12 +47,12 @@ const BoardIdLayout = async ({
 
   return (
     <div
-      className="relative h-full bg-no-repeat bg-cover bg-center"
+      className='relative h-full bg-cover bg-center bg-no-repeat'
       style={{ backgroundImage: `url(${board.imageFullUrl})` }}
     >
       <BoardNavbar data={board} />
-      <div className="absolute inset-0 bg-black/10" />
-      <main className="relative pt-28 h-full">{children}</main>
+      <div className='absolute inset-0 bg-black/10' />
+      <main className='relative h-full pt-28'>{children}</main>
     </div>
   );
 };

app/(platform)/(dashboard)/board/[boardId]/page.tsx

@@ -1,8 +1,8 @@
-import { auth } from "@clerk/nextjs";
-import { redirect } from "next/navigation";
+import { auth } from '@clerk/nextjs';
+import { redirect } from 'next/navigation';
 
-import { db } from "@/lib/db";
-import { ListContainer } from "./_components/list-container";
+import { db } from '@/lib/db';
+import { ListContainer } from './_components/list-container';
 
 interface BoardIdPageProps {
   params: {
@@ -14,7 +14,7 @@ const BoardIdPage = async ({ params }: BoardIdPageProps) => {
   const { orgId } = auth();
 
   if (!orgId) {
-    redirect("/select-org");
+    redirect('/select-org');
   }
 
   const lists = await db.list.findMany({
@@ -27,20 +27,20 @@ const BoardIdPage = async ({ params }: BoardIdPageProps) => {
     include: {
       cards: {
         orderBy: {
-          order: "asc",
+          order: 'asc',
         },
       },
     },
     orderBy: {
-      order: "asc",
+      order: 'asc',
     },
   });
 
   return (
-    <div className="p-4 h-full overflow-x-auto">
+    <div className='h-full overflow-x-auto p-4'>
       <ListContainer boardId={params.boardId} data={lists} />
     </div>
-  )
+  );
 };
 
 export default BoardIdPage;

app/(platform)/(dashboard)/layout.tsx

@@ -1,8 +1,8 @@
-import { Navbar } from "./_components/Navbar";
+import { Navbar } from './_components/Navbar';
 
 const DashbordLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="h-full">
+    <div className='h-full'>
       <Navbar />
       {children}
     </div>

app/(platform)/(dashboard)/organization/[organizationId]/_components/board-list.tsx

@@ -1,21 +1,21 @@
-import Link from "next/link";
-import { auth } from "@clerk/nextjs";
-import { redirect } from "next/navigation";
-import { HelpCircle, User2 } from "lucide-react";
+import Link from 'next/link';
+import { auth } from '@clerk/nextjs';
+import { redirect } from 'next/navigation';
+import { HelpCircle, User2 } from 'lucide-react';
 
-import { db } from "@/lib/db";
-import { Hint } from "@/components/hint";
-import { Skeleton } from "@/components/ui/skeleton";
-import { FormPopover } from "@/components/form/form-popover";
-import { MAX_FREE_BOARDS } from "@/constants/boards";
-import { getAvailableCount } from "@/lib/org-limit";
-import { checkSubscription } from "@/lib/subscription";
+import { db } from '@/lib/db';
+import { Hint } from '@/components/hint';
+import { Skeleton } from '@/components/ui/skeleton';
+import { FormPopover } from '@/components/form/form-popover';
+import { MAX_FREE_BOARDS } from '@/constants/boards';
+import { getAvailableCount } from '@/lib/org-limit';
+import { checkSubscription } from '@/lib/subscription';
 
 export const BoardList = async () => {
   const { orgId } = auth();
 
   if (!orgId) {
-    return redirect("/select-org");
+    return redirect('/select-org');
   }
 
   const boards = await db.board.findMany({
@@ -23,7 +23,7 @@ export const BoardList = async () => {
       orgId,
     },
     orderBy: {
-      createdAt: "desc",
+      createdAt: 'desc',
     },
   });
 
@@ -31,32 +31,32 @@ export const BoardList = async () => {
   const isPro = await checkSubscription();
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center font-semibold text-lg text-neutral-700">
-        <User2 className="h-6 w-6 mr-2" />
+    <div className='space-y-4'>
+      <div className='flex items-center text-lg font-semibold text-neutral-700'>
+        <User2 className='mr-2 h-6 w-6' />
         Your boards
       </div>
-      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+      <div className='grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4'>
         {boards.map((board) => (
           <Link
             key={board.id}
             href={`/board/${board.id}`}
-            className="group relative aspect-video bg-no-repeat bg-center bg-cover bg-sky-700 rounded-sm h-full w-full p-2 overflow-hidden"
+            className='group relative aspect-video h-full w-full overflow-hidden rounded-sm bg-sky-700 bg-cover bg-center bg-no-repeat p-2'
             style={{ backgroundImage: `url(${board.imageThumbUrl})` }}
           >
-            <div className="absolute inset-0 bg-black/30 group-hover:bg-black/40 transition" />
-            <p className="relative font-semibold text-white">{board.title}</p>
+            <div className='absolute inset-0 bg-black/30 transition group-hover:bg-black/40' />
+            <p className='relative font-semibold text-white'>{board.title}</p>
           </Link>
         ))}
-        <FormPopover sideOffset={10} side="right">
+        <FormPopover sideOffset={10} side='right'>
           <div
-            role="button"
-            className="aspect-video relative h-full w-full bg-muted rounded-sm flex flex-col gap-y-1 items-center justify-center hover:opacity-75 transition"
+            role='button'
+            className='relative flex aspect-video h-full w-full flex-col items-center justify-center gap-y-1 rounded-sm bg-muted transition hover:opacity-75'
           >
-            <p className="text-sm">Create new board</p>
-            <span className="text-xs">
+            <p className='text-sm'>Create new board</p>
+            <span className='text-xs'>
               {isPro
-                ? "Unlimited"
+                ? 'Unlimited'
                 : `${MAX_FREE_BOARDS - availableCount} remaining`}
             </span>
             <Hint
@@ -65,7 +65,7 @@ export const BoardList = async () => {
                 Free Workspaces can have up to 5 open boards. For unlimited boards upgrade this workspace.
               `}
             >
-              <HelpCircle className="absolute bottom-2 right-2 h-[14px] w-[14px]" />
+              <HelpCircle className='absolute bottom-2 right-2 h-[14px] w-[14px]' />
             </Hint>
           </div>
         </FormPopover>
@@ -76,15 +76,15 @@ export const BoardList = async () => {
 
 BoardList.Skeleton = function SkeletonBoardList() {
   return (
-    <div className="grid gird-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
-      <Skeleton className="aspect-video h-full w-full p-2" />
-      <Skeleton className="aspect-video h-full w-full p-2" />
-      <Skeleton className="aspect-video h-full w-full p-2" />
-      <Skeleton className="aspect-video h-full w-full p-2" />
-      <Skeleton className="aspect-video h-full w-full p-2" />
-      <Skeleton className="aspect-video h-full w-full p-2" />
-      <Skeleton className="aspect-video h-full w-full p-2" />
-      <Skeleton className="aspect-video h-full w-full p-2" />
+    <div className='gird-cols-2 grid gap-4 sm:grid-cols-3 lg:grid-cols-4'>
+      <Skeleton className='aspect-video h-full w-full p-2' />
+      <Skeleton className='aspect-video h-full w-full p-2' />
+      <Skeleton className='aspect-video h-full w-full p-2' />
+      <Skeleton className='aspect-video h-full w-full p-2' />
+      <Skeleton className='aspect-video h-full w-full p-2' />
+      <Skeleton className='aspect-video h-full w-full p-2' />
+      <Skeleton className='aspect-video h-full w-full p-2' />
+      <Skeleton className='aspect-video h-full w-full p-2' />
     </div>
   );
 };

app/(platform)/(dashboard)/organization/[organizationId]/_components/info.tsx

@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import Image from "next/image";
-import { CreditCard } from "lucide-react";
+import Image from 'next/image';
+import { CreditCard } from 'lucide-react';
 
-import { useOrganization } from "@clerk/nextjs";
-import { Skeleton } from "@/components/ui/skeleton";
+import { useOrganization } from '@clerk/nextjs';
+import { Skeleton } from '@/components/ui/skeleton';
 
 interface InfoProps {
   isPro: boolean;
@@ -18,20 +18,20 @@ export const Info = ({ isPro }: InfoProps) => {
   }
 
   return (
-    <div className="flex items-center gap-x-4">
-      <div className="w-[60px] h-[60px] relative">
+    <div className='flex items-center gap-x-4'>
+      <div className='relative h-[60px] w-[60px]'>
         <Image
           fill
           src={organization?.imageUrl!}
-          alt="Organization Logo"
-          className="rounded-md object-cover"
+          alt='Organization Logo'
+          className='rounded-md object-cover'
         />
       </div>
-      <div className="space-y-1">
-        <p className="font-semibold text-xl">{organization?.name}</p>
-        <div className="flex items-center text-xs text-muted-foreground">
-          <CreditCard className="h-3 w-3 mr-1" />
-          {isPro ? "Pro" : "Free"}
+      <div className='space-y-1'>
+        <p className='text-xl font-semibold'>{organization?.name}</p>
+        <div className='flex items-center text-xs text-muted-foreground'>
+          <CreditCard className='mr-1 h-3 w-3' />
+          {isPro ? 'Pro' : 'Free'}
         </div>
       </div>
     </div>
@@ -40,15 +40,15 @@ export const Info = ({ isPro }: InfoProps) => {
 
 Info.Skeleton = function SkeletonInfo() {
   return (
-    <div className="flex items-center gap-x-4">
-      <div className="w-[60px] h-[60px] relative">
-        <Skeleton className="w-full h-full absolute" />
+    <div className='flex items-center gap-x-4'>
+      <div className='relative h-[60px] w-[60px]'>
+        <Skeleton className='absolute h-full w-full' />
       </div>
-      <div className="space-y-2">
-        <Skeleton className="h-10 w-[200px]" />
-        <div className="flex items-center">
-          <Skeleton className="h-4 w-4 mr-2" />
-          <Skeleton className="h-4 w-[100px]" />
+      <div className='space-y-2'>
+        <Skeleton className='h-10 w-[200px]' />
+        <div className='flex items-center'>
+          <Skeleton className='mr-2 h-4 w-4' />
+          <Skeleton className='h-4 w-[100px]' />
         </div>
       </div>
     </div>

app/(platform)/(dashboard)/organization/[organizationId]/_components/org-control.tsx

@@ -1,8 +1,8 @@
-"use client";
+'use client';
 
-import { useEffect } from "react";
-import { useParams } from "next/navigation";
-import { useOrganizationList } from "@clerk/nextjs";
+import { useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import { useOrganizationList } from '@clerk/nextjs';
 
 export const OrgControl = () => {
   const params = useParams();

app/(platform)/(dashboard)/organization/[organizationId]/activity/_components/activity-list.tsx

@@ -1,27 +1,27 @@
-import { auth } from "@clerk/nextjs";
-import { redirect } from "next/navigation";
+import { auth } from '@clerk/nextjs';
+import { redirect } from 'next/navigation';
 
-import { db } from "@/lib/db";
-import { ActivityItem } from "@/components/activity-item";
-import { Skeleton } from "@/components/ui/skeleton";
+import { db } from '@/lib/db';
+import { ActivityItem } from '@/components/activity-item';
+import { Skeleton } from '@/components/ui/skeleton';
 
 export const ActivityList = async () => {
   const { orgId } = auth();
 
-  if (!orgId) redirect("/select-org");
+  if (!orgId) redirect('/select-org');
 
   const auditLogs = await db.auditLog.findMany({
     where: {
       orgId,
     },
     orderBy: {
-      createdAt: "desc",
+      createdAt: 'desc',
     },
   });
 
   return (
-    <ol className="space-y-4 mt-4">
-      <p className="hidden last:block text-xs text-center text-muted-foreground">
+    <ol className='mt-4 space-y-4'>
+      <p className='hidden text-center text-xs text-muted-foreground last:block'>
         No activity found inside this organization
       </p>
       {auditLogs.map((log) => (
@@ -33,12 +33,12 @@ export const ActivityList = async () => {
 
 ActivityList.Skeleton = function ActivityListSkeleton() {
   return (
-    <ol className="space-y-4 mt-4">
-      <Skeleton className="w-[80%] h-14" />
-      <Skeleton className="w-[50%] h-14" />
-      <Skeleton className="w-[70%] h-14" />
-      <Skeleton className="w-[80%] h-14" />
-      <Skeleton className="w-[75%] h-14" />
+    <ol className='mt-4 space-y-4'>
+      <Skeleton className='h-14 w-[80%]' />
+      <Skeleton className='h-14 w-[50%]' />
+      <Skeleton className='h-14 w-[70%]' />
+      <Skeleton className='h-14 w-[80%]' />
+      <Skeleton className='h-14 w-[75%]' />
     </ol>
   );
 };

app/(platform)/(dashboard)/organization/[organizationId]/activity/page.tsx

@@ -1,18 +1,18 @@
-import { Suspense } from "react";
+import { Suspense } from 'react';
 
-import { Separator } from "@/components/ui/separator";
+import { Separator } from '@/components/ui/separator';
 
-import { Info } from "../_components/info";
-import { ActivityList } from "./_components/activity-list";
-import { checkSubscription } from "@/lib/subscription";
+import { Info } from '../_components/info';
+import { ActivityList } from './_components/activity-list';
+import { checkSubscription } from '@/lib/subscription';
 
 const ActivityPage = async () => {
   const isPro = await checkSubscription();
 
   return (
-    <div className="w-full">
+    <div className='w-full'>
       <Info isPro={isPro} />
-      <Separator className="my-2" />
+      <Separator className='my-2' />
       <Suspense fallback={<ActivityList.Skeleton />}>
         <ActivityList />
       </Suspense>

app/(platform)/(dashboard)/organization/[organizationId]/billing/_components/subscription-button.tsx

@@ -1,11 +1,11 @@
-"use client";
+'use client';
 
-import { toast } from "sonner";
+import { toast } from 'sonner';
 
-import { stripeRedirect } from "@/actions/stripe-redirect";
-import { Button } from "@/components/ui/button";
-import { useAction } from "@/hooks/use-action";
-import { useProModal } from "@/hooks/use-pro-modal";
+import { stripeRedirect } from '@/actions/stripe-redirect';
+import { Button } from '@/components/ui/button';
+import { useAction } from '@/hooks/use-action';
+import { useProModal } from '@/hooks/use-pro-modal';
 
 interface SubscriptionButtonProps {
   isPro: boolean;
@@ -32,8 +32,8 @@ export const SubscriptionButton = ({ isPro }: SubscriptionButtonProps) => {
   };
 
   return (
-    <Button disabled={isLoading} onClick={onClick} variant="primary">
-      {isPro ? "Manage Subscription" : "Upgrade to Pro"}
+    <Button disabled={isLoading} onClick={onClick} variant='primary'>
+      {isPro ? 'Manage Subscription' : 'Upgrade to Pro'}
     </Button>
   );
 };

app/(platform)/(dashboard)/organization/[organizationId]/billing/page.tsx

@@ -1,19 +1,19 @@
-import { checkSubscription } from "@/lib/subscription";
-import { Separator } from "@/components/ui/separator";
+import { checkSubscription } from '@/lib/subscription';
+import { Separator } from '@/components/ui/separator';
 
-import { Info } from "../_components/info";
-import { SubscriptionButton } from "./_components/subscription-button";
+import { Info } from '../_components/info';
+import { SubscriptionButton } from './_components/subscription-button';
 
 const BillingPage = async () => {
   const isPro = await checkSubscription();
 
   return (
-    <div className="w-full">
+    <div className='w-full'>
       <Info isPro={isPro} />
-      <Separator className="my-2" />
+      <Separator className='my-2' />
       <SubscriptionButton isPro={isPro} />
     </div>
   );
 };
 
-export default BillingPage;
+export default BillingPage;

app/(platform)/(dashboard)/organization/[organizationId]/layout.tsx

@@ -1,13 +1,13 @@
-import { startCase } from "lodash";
-import { auth } from "@clerk/nextjs";
+import { startCase } from 'lodash';
+import { auth } from '@clerk/nextjs';
 
-import { OrgControl } from "./_components/org-control";
+import { OrgControl } from './_components/org-control';
 
 export async function generateMetadata() {
   const { orgSlug } = auth();
 
   return {
-    title: startCase(orgSlug ?? "organization"),
+    title: startCase(orgSlug ?? 'organization'),
   };
 }
 

app/(platform)/(dashboard)/organization/[organizationId]/page.tsx

@@ -1,19 +1,19 @@
-import { Suspense } from "react";
+import { Suspense } from 'react';
 
-import { Separator } from "@/components/ui/separator";
-import { checkSubscription } from "@/lib/subscription";
+import { Separator } from '@/components/ui/separator';
+import { checkSubscription } from '@/lib/subscription';
 
-import { Info } from "./_components/info";
-import { BoardList } from "./_components/board-list";
+import { Info } from './_components/info';
+import { BoardList } from './_components/board-list';
 
 const OrganizationIdPage = async () => {
   const isPro = await checkSubscription();
 
   return (
-    <div className="w-full mb-20">
+    <div className='mb-20 w-full'>
       <Info isPro={isPro} />
-      <Separator className="my-4" />
-      <div className="px-2 md:px-4">
+      <Separator className='my-4' />
+      <div className='px-2 md:px-4'>
         <Suspense fallback={<BoardList.Skeleton />}>
           <BoardList />
         </Suspense>

app/(platform)/(dashboard)/organization/[organizationId]/settings/page.tsx

@@ -1,19 +1,19 @@
-import { OrganizationProfile } from "@clerk/nextjs";
+import { OrganizationProfile } from '@clerk/nextjs';
 
 const SettingsPage = () => {
   return (
-    <div className="w-full">
+    <div className='w-full'>
       <OrganizationProfile
         appearance={{
           elements: {
             rootBox: {
-              boxShadow: "none",
-              width: "100%",
+              boxShadow: 'none',
+              width: '100%',
             },
             card: {
-              border: "1px solid #e5e5e5",
-              boxShadow: "none",
-              width: "100%",
+              border: '1px solid #e5e5e5',
+              boxShadow: 'none',
+              width: '100%',
             },
           },
         }}

app/(platform)/(dashboard)/organization/layout.tsx

@@ -1,10 +1,10 @@
-import { Sidebar } from "../_components/sidebar";
+import { Sidebar } from '../_components/sidebar';
 
 const OrganizationLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <main className="pt-20 md:pt-24 px-4 max-w-6xl 2xl:max-w-screen-xl mx-auto">
-      <div className="flex gap-x-7">
-        <div className="w-64 shrink-0 hidden md:block">
+    <main className='mx-auto max-w-6xl px-4 pt-20 md:pt-24 2xl:max-w-screen-xl'>
+      <div className='flex gap-x-7'>
+        <div className='hidden w-64 shrink-0 md:block'>
           <Sidebar />
         </div>
         {children}

app/(platform)/layout.tsx

@@ -1,8 +1,8 @@
-import { Toaster } from "sonner";
-import { ClerkProvider } from "@clerk/nextjs";
+import { Toaster } from 'sonner';
+import { ClerkProvider } from '@clerk/nextjs';
 
-import { ModalProvider } from "@/components/providers/modal-provider";
-import { QueryProvider } from "@/components/providers/query-provider";
+import { ModalProvider } from '@/components/providers/modal-provider';
+import { QueryProvider } from '@/components/providers/query-provider';
 
 const PlatformLayout = ({ children }: { children: React.ReactNode }) => {
   return (

app/api/cards/[cardId]/logs/route.ts

@@ -1,8 +1,8 @@
-import { auth } from "@clerk/nextjs";
-import { ENTITY_TYPE } from "@prisma/client";
-import { NextResponse } from "next/server";
+import { auth } from '@clerk/nextjs';
+import { ENTITY_TYPE } from '@prisma/client';
+import { NextResponse } from 'next/server';
 
-import { db } from "@/lib/db";
+import { db } from '@/lib/db';
 
 export async function GET(
   req: Request,
@@ -12,7 +12,7 @@ export async function GET(
     const { orgId, userId } = auth();
 
     if (!orgId || !userId)
-      return new NextResponse(JSON.stringify({ error: "Unauthorized" }), {
+      return new NextResponse(JSON.stringify({ error: 'Unauthorized' }), {
         status: 401,
       });
 
@@ -23,7 +23,7 @@ export async function GET(
         entityType: ENTITY_TYPE.CARD,
       },
       orderBy: {
-        createdAt: "desc",
+        createdAt: 'desc',
       },
       take: 3,
     });

app/api/cards/[cardId]/route.ts

@@ -1,7 +1,7 @@
-import { auth } from "@clerk/nextjs";
-import { NextResponse } from "next/server";
+import { auth } from '@clerk/nextjs';
+import { NextResponse } from 'next/server';
 
-import { db } from "@/lib/db";
+import { db } from '@/lib/db';
 
 export async function GET(
   req: Request,
@@ -11,7 +11,7 @@ export async function GET(
     const { orgId, userId } = auth();
 
     if (!orgId || !userId)
-      return new NextResponse(JSON.stringify({ error: "Unauthorized" }), {
+      return new NextResponse(JSON.stringify({ error: 'Unauthorized' }), {
         status: 401,
       });
 

app/api/webhook/route.ts

@@ -1,13 +1,13 @@
-import Stripe from "stripe";
-import { headers } from "next/headers";
-import { NextResponse } from "next/server";
+import Stripe from 'stripe';
+import { headers } from 'next/headers';
+import { NextResponse } from 'next/server';
 
-import { db } from "@/lib/db";
-import { stripe } from "@/lib/stripe";
+import { db } from '@/lib/db';
+import { stripe } from '@/lib/stripe';
 
 export async function POST(req: Request) {
   const body = await req.text();
-  const signature = headers().get("Stripe-Signature") as string;
+  const signature = headers().get('Stripe-Signature') as string;
 
   let event: Stripe.Event;
 
@@ -23,13 +23,13 @@ export async function POST(req: Request) {
 
   const session = event.data.object as Stripe.Checkout.Session;
 
-  if (event.type === "checkout.session.completed") {
+  if (event.type === 'checkout.session.completed') {
     const subscription = await stripe.subscriptions.retrieve(
       session.subscription as string
     );
 
     if (!session?.metadata?.orgId) {
-      return new NextResponse(JSON.stringify({ error: "Missing orgId" }), {
+      return new NextResponse(JSON.stringify({ error: 'Missing orgId' }), {
         status: 400,
       });
     }
@@ -47,7 +47,7 @@ export async function POST(req: Request) {
     });
   }
 
-  if (event.type === "invoice.payment_succeeded") {
+  if (event.type === 'invoice.payment_succeeded') {
     const subscription = await stripe.subscriptions.retrieve(
       session.subscription as string
     );

app/layout.tsx

@@ -1,9 +1,9 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-import { siteConfig } from "@/config/site";
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import './globals.css';
+import { siteConfig } from '@/config/site';
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: {
@@ -13,8 +13,8 @@ export const metadata: Metadata = {
   description: siteConfig.description,
   icons: [
     {
-      url: "/favicon.svg",
-      href: "/favicon.svg",
+      url: '/favicon.svg',
+      href: '/favicon.svg',
     },
   ],
 };
@@ -25,7 +25,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang='en'>
       <body className={inter.className}>{children}</body>
     </html>
   );

components.json

@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

components/activity-item.tsx

@@ -1,8 +1,8 @@
-import { format } from "date-fns";
-import { AuditLog } from "@prisma/client";
+import { format } from 'date-fns';
+import { AuditLog } from '@prisma/client';
 
-import { generateLogMessage } from "@/lib/generate-log-message";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { generateLogMessage } from '@/lib/generate-log-message';
+import { Avatar, AvatarImage } from '@/components/ui/avatar';
 
 interface ActivityItemProps {
   data: AuditLog;
@@ -10,18 +10,18 @@ interface ActivityItemProps {
 
 export const ActivityItem = ({ data }: ActivityItemProps) => {
   return (
-    <li className="flex items-center gap-x-2">
-      <Avatar className="h-8 w-8">
+    <li className='flex items-center gap-x-2'>
+      <Avatar className='h-8 w-8'>
         <AvatarImage src={data.userImage} />
       </Avatar>
-      <div className="flex flex-col space-y-0.5">
-        <p className="text-sm text-muted-foreground">
-          <span className="font-semibold lowercase text-neutral-700">
+      <div className='flex flex-col space-y-0.5'>
+        <p className='text-sm text-muted-foreground'>
+          <span className='font-semibold lowercase text-neutral-700'>
             {data.userName}
-          </span>{" "}
+          </span>{' '}
           {generateLogMessage(data)}
         </p>
-        <p className="text-xs text-muted-foreground">
+        <p className='text-xs text-muted-foreground'>
           {format(new Date(data.createdAt), "MMM d, yyyy 'at' h:mm a")}
         </p>
       </div>

components/form/form-errors.tsx

@@ -1,4 +1,4 @@
-import { XCircle } from "lucide-react";
+import { XCircle } from 'lucide-react';
 
 interface FormErrorsProps {
   id: string;
@@ -11,15 +11,15 @@ export const FormErrors = ({ id, errors }: FormErrorsProps) => {
   return (
     <div
       id={`${id}-error`}
-      aria-live="polite"
-      className="mt-2 text-xs text-rose-500"
+      aria-live='polite'
+      className='mt-2 text-xs text-rose-500'
     >
       {errors?.[id]?.map((error: string) => (
         <div
           key={error}
-          className="flex items-center font-medium p-2 border border-rose-500 bg-rose-500/10 rounded-sm"
+          className='flex items-center rounded-sm border border-rose-500 bg-rose-500/10 p-2 font-medium'
         >
-          <XCircle className="h-4 w-4 mr-2" />
+          <XCircle className='mr-2 h-4 w-4' />
           {error}
         </div>
       ))}

components/form/form-input.tsx

@@ -1,12 +1,12 @@
-"use client";
+'use client';
 
-import { forwardRef } from "react";
-import { useFormStatus } from "react-dom";
+import { forwardRef } from 'react';
+import { useFormStatus } from 'react-dom';
 
-import { cn } from "@/lib/utils";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { FormErrors } from "./form-errors";
+import { cn } from '@/lib/utils';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { FormErrors } from './form-errors';
 
 interface FormInputProps {
   id: string;
@@ -32,7 +32,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
       disabled,
       errors,
       className,
-      defaultValue = "",
+      defaultValue = '',
       onBlur,
     },
     ref
@@ -40,12 +40,12 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
     const { pending } = useFormStatus();
 
     return (
-      <div className="space-y-2">
-        <div className="space-y-1">
+      <div className='space-y-2'>
+        <div className='space-y-1'>
           {label ? (
             <Label
               htmlFor={id}
-              className="text-xs font-semibold text-neutral-700"
+              className='text-xs font-semibold text-neutral-700'
             >
               {label}
             </Label>
@@ -60,7 +60,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
             placeholder={placeholder}
             type={type}
             disabled={pending ?? disabled}
-            className={cn("text-sm px-2 py-1 h-7", className)}
+            className={cn('h-7 px-2 py-1 text-sm', className)}
             aria-describedby={`${id}-error`}
           />
         </div>
@@ -70,4 +70,4 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
   }
 );
 
-FormInput.displayName = "FormInput";
+FormInput.displayName = 'FormInput';

components/form/form-picker.tsx

@@ -1,16 +1,16 @@
-"use client";
+'use client';
 
-import Image from "next/image";
-import Link from "next/link";
+import Image from 'next/image';
+import Link from 'next/link';
 
-import { useEffect, useState } from "react";
-import { useFormStatus } from "react-dom";
-import { Check, Loader2 } from "lucide-react";
+import { useEffect, useState } from 'react';
+import { useFormStatus } from 'react-dom';
+import { Check, Loader2 } from 'lucide-react';
 
-import { unsplash } from "@/lib/unsplash";
-import { cn } from "@/lib/utils";
-import { defaultImages } from "@/constants/images";
-import { FormErrors } from "./form-errors";
+import { unsplash } from '@/lib/unsplash';
+import { cn } from '@/lib/utils';
+import { defaultImages } from '@/constants/images';
+import { FormErrors } from './form-errors';
 
 interface FormPickerProps {
   id: string;
@@ -29,7 +29,7 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
     const fetchImages = async () => {
       try {
         const result = await unsplash.photos.getRandom({
-          collectionIds: ["317099"],
+          collectionIds: ['317099'],
           count: 9,
         });
 
@@ -37,7 +37,7 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
           const newImages = result.response as Array<Record<string, any>>;
           setImages(newImages);
         } else {
-          console.error("Failed to get images.");
+          console.error('Failed to get images.');
         }
       } catch (error) {
         console.log(error);
@@ -52,21 +52,21 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
 
   if (isLoading) {
     return (
-      <div className="p-6 flex items-center justify-center">
-        <Loader2 className="h-6 w-6 text-sky-700 animate-spin" />
+      <div className='flex items-center justify-center p-6'>
+        <Loader2 className='h-6 w-6 animate-spin text-sky-700' />
       </div>
     );
   }
 
   return (
-    <div className="relative">
-      <div className="grid grid-cols-3 gap-2 mb-2">
+    <div className='relative'>
+      <div className='mb-2 grid grid-cols-3 gap-2'>
         {images.map((image) => (
           <div
             key={image.id}
             className={cn(
-              "cursor-pointer relative aspect-video group hover:opacity-75 transition bg-muted",
-              pending && "opacity-50 hover:opacity-50 cursor-auto"
+              'group relative aspect-video cursor-pointer bg-muted transition hover:opacity-75',
+              pending && 'cursor-auto opacity-50 hover:opacity-50'
             )}
             onClick={() => {
               if (pending) return;
@@ -74,36 +74,36 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
             }}
           >
             <input
-              type="radio"
+              type='radio'
               id={id}
               name={id}
-              className="hidden"
+              className='hidden'
               checked={selectedImageId === image.id}
               disabled={pending}
               value={`${image.id}|${image.urls.thumb}|${image.urls.full}|${image.links.html}|${image.user.name}`}
             />
             <Image
               src={image.urls.thumb}
-              alt="Unsplash image"
-              className="object-cover rounded-sm"
+              alt='Unsplash image'
+              className='rounded-sm object-cover'
               fill
             />
             {selectedImageId === image.id && (
-              <div className="absolute inset-y-0 h-full w-full bg-black/30 flex items-center justify-center">
-                <Check className="h-4 w-4 text-white" />
+              <div className='absolute inset-y-0 flex h-full w-full items-center justify-center bg-black/30'>
+                <Check className='h-4 w-4 text-white' />
               </div>
             )}
             <Link
               href={image.links.html}
-              target="_blank"
-              className="opacity-0 group-hover:opacity-100 absolute bottom-0 w-full text-[10px] truncate text-white hover:underline p-1 bg-black/50"
+              target='_blank'
+              className='absolute bottom-0 w-full truncate bg-black/50 p-1 text-[10px] text-white opacity-0 hover:underline group-hover:opacity-100'
             >
               {image.user.name}
             </Link>
           </div>
         ))}
       </div>
-      <FormErrors id="image" errors={errors} />
+      <FormErrors id='image' errors={errors} />
     </div>
   );
 };

components/form/form-popover.tsx

@@ -1,45 +1,45 @@
-"use client";
+'use client';
 
-import { X } from "lucide-react";
-import { toast } from "sonner";
-import { ElementRef, useRef } from "react";
-import { useRouter } from "next/navigation";
+import { X } from 'lucide-react';
+import { toast } from 'sonner';
+import { ElementRef, useRef } from 'react';
+import { useRouter } from 'next/navigation';
 
 import {
   Popover,
   PopoverClose,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover";
-import { useAction } from "@/hooks/use-action";
-import { createBoard } from "@/actions/create-board";
-import { Button } from "@/components//ui/button";
-import { useProModal } from "@/hooks/use-pro-modal";
+} from '@/components/ui/popover';
+import { useAction } from '@/hooks/use-action';
+import { createBoard } from '@/actions/create-board';
+import { Button } from '@/components//ui/button';
+import { useProModal } from '@/hooks/use-pro-modal';
 
-import { FormInput } from "./form-input";
-import { FormSubmit } from "./form-submit";
-import { FormPicker } from "./form-picker";
+import { FormInput } from './form-input';
+import { FormSubmit } from './form-submit';
+import { FormPicker } from './form-picker';
 
 interface FormPopoverProps {
   children: React.ReactNode;
-  side?: "left" | "right" | "top" | "bottom";
-  align?: "center" | "start" | "end";
+  side?: 'left' | 'right' | 'top' | 'bottom';
+  align?: 'center' | 'start' | 'end';
   sideOffset?: number;
 }
 
 export const FormPopover = ({
   children,
-  side = "bottom",
+  side = 'bottom',
   align,
   sideOffset = 0,
 }: FormPopoverProps) => {
   const proModal = useProModal();
   const router = useRouter();
-  const closeRef = useRef<ElementRef<"button">>(null);
+  const closeRef = useRef<ElementRef<'button'>>(null);
 
   const { execute, fieldErrors } = useAction(createBoard, {
     onSuccess: (data) => {
-      toast.success("Board created");
+      toast.success('Board created');
       closeRef.current?.click();
       router.push(`/board/${data.id}`);
     },
@@ -50,8 +50,8 @@ export const FormPopover = ({
   });
 
   const onSubmit = (formData: FormData) => {
-    const title = formData.get("title") as string;
-    const image = formData.get("image") as string;
+    const title = formData.get('title') as string;
+    const image = formData.get('image') as string;
 
     execute({ title, image });
   };
@@ -61,32 +61,32 @@ export const FormPopover = ({
       <PopoverTrigger asChild>{children}</PopoverTrigger>
       <PopoverContent
         align={align}
-        className="w-80 pt-3"
+        className='w-80 pt-3'
         side={side}
         sideOffset={sideOffset}
       >
-        <div className="text-sm font-medium text-center text-neutral-600 pb-4">
+        <div className='pb-4 text-center text-sm font-medium text-neutral-600'>
           Create board
         </div>
         <PopoverClose ref={closeRef} asChild>
           <Button
-            className="h-auto w-auto p-2 absolute top-2 right-2 text-neutral-600"
-            variant="ghost"
+            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
+            variant='ghost'
           >
-            <X className="h-4 w-4" />
+            <X className='h-4 w-4' />
           </Button>
         </PopoverClose>
-        <form action={onSubmit} className="space-y-4">
-          <div className="space-y-4">
-            <FormPicker id="image" errors={fieldErrors} />
+        <form action={onSubmit} className='space-y-4'>
+          <div className='space-y-4'>
+            <FormPicker id='image' errors={fieldErrors} />
             <FormInput
-              id="title"
-              label="Board Title"
-              type="text"
+              id='title'
+              label='Board Title'
+              type='text'
               errors={fieldErrors}
             />
           </div>
-          <FormSubmit className="w-full">Create</FormSubmit>
+          <FormSubmit className='w-full'>Create</FormSubmit>
         </form>
       </PopoverContent>
     </Popover>

components/form/form-submit.tsx

@@ -1,38 +1,38 @@
-"Use client";
+'Use client';
 
-import { useFormStatus } from "react-dom";
+import { useFormStatus } from 'react-dom';
 
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
 
 interface FormSubmitProps {
   children: React.ReactNode;
   disabled?: boolean;
   className?: string;
   variant?:
-    | "default"
-    | "destructive"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "link"
-    | "primary";
+    | 'default'
+    | 'destructive'
+    | 'outline'
+    | 'secondary'
+    | 'ghost'
+    | 'link'
+    | 'primary';
 }
 
 export const FormSubmit = ({
   children,
   disabled,
   className,
-  variant = "primary",
+  variant = 'primary',
 }: FormSubmitProps) => {
   const { pending } = useFormStatus();
 
   return (
     <Button
       disabled={pending || disabled}
-      type="submit"
+      type='submit'
       variant={variant}
-      size="sm"
+      size='sm'
       className={cn(className)}
     >
       {children}

components/form/form-textarea.tsx

@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import { useFormStatus } from "react-dom";
-import { KeyboardEventHandler, forwardRef } from "react";
+import { useFormStatus } from 'react-dom';
+import { KeyboardEventHandler, forwardRef } from 'react';
 
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { cn } from "@/lib/utils";
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
 
-import { FormErrors } from "./form-errors";
+import { FormErrors } from './form-errors';
 
 interface FormTextareaProps {
   id: string;
@@ -43,12 +43,12 @@ export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>(
     const { pending } = useFormStatus();
 
     return (
-      <div className="space-y-2 w-full">
-        <div className="space-y-1 w-full">
+      <div className='w-full space-y-2'>
+        <div className='w-full space-y-1'>
           {label ? (
             <Label
               htmlFor={id}
-              className="text-xs font-semibold text-neutral-700"
+              className='text-xs font-semibold text-neutral-700'
             >
               {label}
             </Label>
@@ -64,7 +64,7 @@ export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>(
             id={id}
             disabled={pending || disabled}
             className={cn(
-              "resize-none focus-visible:ring-0 focus-visible:ring-offset-0 ring-0 focus:ring-0 outline-none shadow-sm",
+              'resize-none shadow-sm outline-none ring-0 focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0',
               className
             )}
             aria-describedby={`${id}-error`}
@@ -77,4 +77,4 @@ export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>(
   }
 );
 
-FormTextarea.displayName = "FormTextarea";
+FormTextarea.displayName = 'FormTextarea';

components/hint.tsx

@@ -3,19 +3,19 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from '@/components/ui/tooltip';
 
 interface HintProps {
   children: React.ReactNode;
   description: string;
-  side?: "left" | "right" | "top" | "bottom";
+  side?: 'left' | 'right' | 'top' | 'bottom';
   sideOffset?: number;
 }
 
 export const Hint = ({
   children,
   description,
-  side = "bottom",
+  side = 'bottom',
   sideOffset = 0,
 }: HintProps) => {
   return (
@@ -25,7 +25,7 @@ export const Hint = ({
         <TooltipContent
           sideOffset={sideOffset}
           side={side}
-          className="text-xs max-w-[220px] break-words"
+          className='max-w-[220px] break-words text-xs'
         >
           {description}
         </TooltipContent>

components/logo.tsx

@@ -1,11 +1,16 @@
-import Image from "next/image";
-import Link from "next/link";
+import Image from 'next/image';
+import Link from 'next/link';
 
 export const Logo = () => {
   return (
-    <Link href="/">
-      <div className="hover:opacity-75 transition items-center gap-x-2 hidden md:flex">
-        <Image src="/logo-transparent.svg" alt="logo" height={100} width={100} />
+    <Link href='/'>
+      <div className='hidden items-center gap-x-2 transition hover:opacity-75 md:flex'>
+        <Image
+          src='/logo-transparent.svg'
+          alt='logo'
+          height={100}
+          width={100}
+        />
       </div>
     </Link>
   );

components/modals/card-modal/actions.tsx

@@ -1,17 +1,17 @@
-"use client";
+'use client';
 
-import { Copy, Trash } from "lucide-react";
-import { useParams } from "next/navigation";
-import { toast } from "sonner";
+import { Copy, Trash } from 'lucide-react';
+import { useParams } from 'next/navigation';
+import { toast } from 'sonner';
 
-import { Skeleton } from "@/components/ui/skeleton";
-import { deleteCard } from "@/actions/delete-card";
-import { Button } from "@/components/ui/button";
-import { useAction } from "@/hooks/use-action";
-import { copyCard } from "@/actions/copy-card";
+import { Skeleton } from '@/components/ui/skeleton';
+import { deleteCard } from '@/actions/delete-card';
+import { Button } from '@/components/ui/button';
+import { useAction } from '@/hooks/use-action';
+import { copyCard } from '@/actions/copy-card';
 
-import { CardWithList } from "@/types";
-import { useCardModal } from "@/hooks/use-card-modal";
+import { CardWithList } from '@/types';
+import { useCardModal } from '@/hooks/use-card-modal';
 
 interface ActionsProps {
   data: CardWithList;
@@ -66,26 +66,26 @@ export const Actions = ({ data }: ActionsProps) => {
   };
 
   return (
-    <div className="space-y-2 mt-2">
-      <p className="text-xs font-semibold">Actions</p>
+    <div className='mt-2 space-y-2'>
+      <p className='text-xs font-semibold'>Actions</p>
       <Button
         onClick={onCopy}
         disabled={isLoadingCopy}
-        variant="gray"
-        className="w-full justify-start"
-        size="inline"
+        variant='gray'
+        className='w-full justify-start'
+        size='inline'
       >
-        <Copy className="h-4 w-4 mr-2" />
+        <Copy className='mr-2 h-4 w-4' />
         Copy
       </Button>
       <Button
         onClick={onDelete}
         disabled={isLoadingDelete}
-        variant="gray"
-        className="w-full justify-start text-destructive"
-        size="inline"
+        variant='gray'
+        className='w-full justify-start text-destructive'
+        size='inline'
       >
-        <Trash className="h-4 w-4 mr-2" />
+        <Trash className='mr-2 h-4 w-4' />
         Delete
       </Button>
     </div>
@@ -94,10 +94,10 @@ export const Actions = ({ data }: ActionsProps) => {
 
 Actions.Skeleton = function ActionsSkeleton() {
   return (
-    <div className="space-y-2 mt-2">
-      <Skeleton className="w-20 h-4 bg-neutral-200" />
-      <Skeleton className="w-full h-8 bg-neutral-200" />
-      <Skeleton className="w-full h-8 bg-neutral-200" />
+    <div className='mt-2 space-y-2'>
+      <Skeleton className='h-4 w-20 bg-neutral-200' />
+      <Skeleton className='h-8 w-full bg-neutral-200' />
+      <Skeleton className='h-8 w-full bg-neutral-200' />
     </div>
   );
 };

components/modals/card-modal/activity.tsx

@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import { AuditLog } from "@prisma/client";
-import { ActivityIcon } from "lucide-react";
+import { AuditLog } from '@prisma/client';
+import { ActivityIcon } from 'lucide-react';
 
-import { Skeleton } from "@/components/ui/skeleton";
-import { ActivityItem } from "@/components/activity-item";
+import { Skeleton } from '@/components/ui/skeleton';
+import { ActivityItem } from '@/components/activity-item';
 
 interface ActivityProps {
   items: AuditLog[];
@@ -12,11 +12,11 @@ interface ActivityProps {
 
 export const Activity = ({ items }: ActivityProps) => {
   return (
-    <div className="flex items-start gap-x-3 w-full">
-      <ActivityIcon className="h-5 w-5 mt-0.5 text-neutral-700" />
-      <div className="w-full">
-        <p className="font-semibold text-neutral-700 mb-2">Activity</p>
-        <ol className="mt-2 space-y-4">
+    <div className='flex w-full items-start gap-x-3'>
+      <ActivityIcon className='mt-0.5 h-5 w-5 text-neutral-700' />
+      <div className='w-full'>
+        <p className='mb-2 font-semibold text-neutral-700'>Activity</p>
+        <ol className='mt-2 space-y-4'>
           {items.map((item) => (
             <ActivityItem key={item.id} data={item} />
           ))}
@@ -28,11 +28,11 @@ export const Activity = ({ items }: ActivityProps) => {
 
 Activity.Skeleton = function ActivitySkeleton() {
   return (
-    <div className="flex items-start gap-x-3 w-full">
-      <Skeleton className="h-6 w-6 bg-neutral-200" />
-      <div className="w-full">
-        <Skeleton className="w-24 h-6 mb-2 bg-neutral-200" />
-        <Skeleton className="w-full h-10 bg-neutral-200" />
+    <div className='flex w-full items-start gap-x-3'>
+      <Skeleton className='h-6 w-6 bg-neutral-200' />
+      <div className='w-full'>
+        <Skeleton className='mb-2 h-6 w-24 bg-neutral-200' />
+        <Skeleton className='h-10 w-full bg-neutral-200' />
       </div>
     </div>
   );

components/modals/card-modal/description.tsx

@@ -1,20 +1,20 @@
-"use client";
+'use client';
 
-import { useEventListener, useOnClickOutside } from "usehooks-ts";
-import { useQueryClient } from "@tanstack/react-query";
-import { useState, ElementRef, useRef } from "react";
-import { useParams } from "next/navigation";
-import { AlignLeft } from "lucide-react";
-import { toast } from "sonner";
+import { useEventListener, useOnClickOutside } from 'usehooks-ts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useState, ElementRef, useRef } from 'react';
+import { useParams } from 'next/navigation';
+import { AlignLeft } from 'lucide-react';
+import { toast } from 'sonner';
 
-import { FormTextarea } from "@/components/form/form-textarea";
-import { FormSubmit } from "@/components/form/form-submit";
-import { Skeleton } from "@/components/ui/skeleton";
-import { updateCard } from "@/actions/update-card";
-import { Button } from "@/components/ui/button";
-import { useAction } from "@/hooks/use-action";
+import { FormTextarea } from '@/components/form/form-textarea';
+import { FormSubmit } from '@/components/form/form-submit';
+import { Skeleton } from '@/components/ui/skeleton';
+import { updateCard } from '@/actions/update-card';
+import { Button } from '@/components/ui/button';
+import { useAction } from '@/hooks/use-action';
 
-import { CardWithList } from "@/types";
+import { CardWithList } from '@/types';
 
 interface DescriptionProps {
   data: CardWithList;
@@ -26,8 +26,8 @@ export const Description = ({ data }: DescriptionProps) => {
 
   const [isEditing, setIsEditing] = useState(false);
 
-  const textareaRef = useRef<ElementRef<"textarea">>(null);
-  const formRef = useRef<ElementRef<"form">>(null);
+  const textareaRef = useRef<ElementRef<'textarea'>>(null);
+  const formRef = useRef<ElementRef<'form'>>(null);
 
   const enaleEditing = () => {
     setIsEditing(true);
@@ -41,18 +41,18 @@ export const Description = ({ data }: DescriptionProps) => {
   };
 
   const onKeyDown = (e: KeyboardEvent) => {
-    if (e.key === "Escape") {
+    if (e.key === 'Escape') {
       disableEditing();
     }
   };
 
-  useEventListener("keydown", onKeyDown);
+  useEventListener('keydown', onKeyDown);
   useOnClickOutside(formRef, disableEditing);
 
   const { execute, fieldErrors } = useAction(updateCard, {
     onSuccess: (data) => {
-      queryClient.invalidateQueries({ queryKey: ["card", data.id] });
-      queryClient.invalidateQueries({ queryKey: ["card-logs", data.id] });
+      queryClient.invalidateQueries({ queryKey: ['card', data.id] });
+      queryClient.invalidateQueries({ queryKey: ['card-logs', data.id] });
       toast.success(`Card "${data.title}" updated`);
       disableEditing();
     },
@@ -62,7 +62,7 @@ export const Description = ({ data }: DescriptionProps) => {
   });
 
   const onSubmit = (formData: FormData) => {
-    const description = formData.get("description") as string;
+    const description = formData.get('description') as string;
     const boardId = params.boardId as string;
 
     execute({
@@ -73,27 +73,27 @@ export const Description = ({ data }: DescriptionProps) => {
   };
 
   return (
-    <div className="flex items-start gap-x-3 w-full">
-      <AlignLeft className="w-5 h-5 mt-0.5 text-neutral-700" />
-      <div className="w-full">
-        <p className="font-semibold text-neutral-700 mb-2">Description</p>
+    <div className='flex w-full items-start gap-x-3'>
+      <AlignLeft className='mt-0.5 h-5 w-5 text-neutral-700' />
+      <div className='w-full'>
+        <p className='mb-2 font-semibold text-neutral-700'>Description</p>
         {isEditing ? (
-          <form ref={formRef} className="space-y-2" action={onSubmit}>
+          <form ref={formRef} className='space-y-2' action={onSubmit}>
             <FormTextarea
-              id="description"
+              id='description'
               ref={textareaRef}
-              className="w-full mt-2"
-              placeholder="Add a more detailed description..."
+              className='mt-2 w-full'
+              placeholder='Add a more detailed description...'
               defaultValue={data.description ?? undefined}
               errors={fieldErrors}
             />
-            <div className="flex items-center gap-x-2">
+            <div className='flex items-center gap-x-2'>
               <FormSubmit>Save</FormSubmit>
               <Button
-                type="button"
+                type='button'
                 onClick={disableEditing}
-                size="sm"
-                variant="ghost"
+                size='sm'
+                variant='ghost'
               >
                 Cancel
               </Button>
@@ -102,10 +102,10 @@ export const Description = ({ data }: DescriptionProps) => {
         ) : (
           <div
             onClick={enaleEditing}
-            role="button"
-            className="min-h-[78px] bg-neutral-200 text-sm font-medium py-3 px-3.5 rounded-md"
+            role='button'
+            className='min-h-[78px] rounded-md bg-neutral-200 px-3.5 py-3 text-sm font-medium'
           >
-            {data.description ?? "Add a more detailed description..."}
+            {data.description ?? 'Add a more detailed description...'}
           </div>
         )}
       </div>
@@ -115,11 +115,11 @@ export const Description = ({ data }: DescriptionProps) => {
 
 Description.Skeleton = function DescriptionSkeleton() {
   return (
-    <div className="flex items-start gap-x-3 w-full">
-      <Skeleton className="h-6 w-6 bg-neutral-200" />
-      <div className="w-full">
-        <Skeleton className="h-6 w-24 mb-2 bg-neutral-200" />
-        <Skeleton className="w-full h-[78px] bg-neutral-200" />
+    <div className='flex w-full items-start gap-x-3'>
+      <Skeleton className='h-6 w-6 bg-neutral-200' />
+      <div className='w-full'>
+        <Skeleton className='mb-2 h-6 w-24 bg-neutral-200' />
+        <Skeleton className='h-[78px] w-full bg-neutral-200' />
       </div>
     </div>
   );

components/modals/card-modal/header.tsx

@@ -1,16 +1,16 @@
-"use client";
+'use client';
 
-import { useRef, ElementRef, useState } from "react";
-import { useQueryClient } from "@tanstack/react-query";
-import { useParams } from "next/navigation";
-import { Layout } from "lucide-react";
-import { toast } from "sonner";
+import { useRef, ElementRef, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useParams } from 'next/navigation';
+import { Layout } from 'lucide-react';
+import { toast } from 'sonner';
 
-import { CardWithList } from "@/types";
-import { useAction } from "@/hooks/use-action";
-import { updateCard } from "@/actions/update-card";
-import { FormInput } from "@/components/form/form-input";
-import { Skeleton } from "@/components/ui/skeleton";
+import { CardWithList } from '@/types';
+import { useAction } from '@/hooks/use-action';
+import { updateCard } from '@/actions/update-card';
+import { FormInput } from '@/components/form/form-input';
+import { Skeleton } from '@/components/ui/skeleton';
 
 interface HeaderProps {
   data: CardWithList;
@@ -23,11 +23,11 @@ export const Header = ({ data }: HeaderProps) => {
   const { execute } = useAction(updateCard, {
     onSuccess: (data) => {
       queryClient.invalidateQueries({
-        queryKey: ["card", data.id],
+        queryKey: ['card', data.id],
       });
 
       queryClient.invalidateQueries({
-        queryKey: ["card-logs", data.id],
+        queryKey: ['card-logs', data.id],
       });
 
       toast.success(`Card renamed to "${data.title}"`);
@@ -38,7 +38,7 @@ export const Header = ({ data }: HeaderProps) => {
     },
   });
 
-  const inputRef = useRef<ElementRef<"input">>(null);
+  const inputRef = useRef<ElementRef<'input'>>(null);
 
   const [title, setTitle] = useState(data.title);
 
@@ -47,7 +47,7 @@ export const Header = ({ data }: HeaderProps) => {
   };
 
   const onSubmit = (formData: FormData) => {
-    const title = formData.get("title") as string;
+    const title = formData.get('title') as string;
     const boardId = params.boardId as string;
 
     if (title === data.title) return;
@@ -60,20 +60,20 @@ export const Header = ({ data }: HeaderProps) => {
   };
 
   return (
-    <div className="flex items-start gap-x-3 mb-6 w-full">
-      <Layout className="h-5 w-5 mt-1 text-neutral-700" />
-      <div className="w-full">
+    <div className='mb-6 flex w-full items-start gap-x-3'>
+      <Layout className='mt-1 h-5 w-5 text-neutral-700' />
+      <div className='w-full'>
         <form action={onSubmit}>
           <FormInput
-            id="title"
+            id='title'
             ref={inputRef}
             onBlur={onBlur}
             defaultValue={title}
-            className="font-semi-bold text-xl px-1 text-neutral-700 bg-transparent border-transparent relative -left-1 w-[95%] focus-visible:bg-white focus-visible:border-input mb-0.5 truncate"
+            className='font-semi-bold relative -left-1 mb-0.5 w-[95%] truncate border-transparent bg-transparent px-1 text-xl text-neutral-700 focus-visible:border-input focus-visible:bg-white'
           />
         </form>
-        <p className="text-sm text-muted-foreground">
-          in list <span className="underline">{data.list.title}</span>
+        <p className='text-sm text-muted-foreground'>
+          in list <span className='underline'>{data.list.title}</span>
         </p>
       </div>
     </div>
@@ -82,11 +82,11 @@ export const Header = ({ data }: HeaderProps) => {
 
 Header.Skeleton = function HeaderSkelton() {
   return (
-    <div className="flex items-start gap-x-3 mb-6">
-      <Skeleton className="h-6 w-6 mt-1 bg-neutral-200" />
+    <div className='mb-6 flex items-start gap-x-3'>
+      <Skeleton className='mt-1 h-6 w-6 bg-neutral-200' />
       <div>
-        <Skeleton className="w-24 h-6 mb-1 bg-neutral-200" />
-        <Skeleton className="w-12 h-4 bg-neutral-200" />
+        <Skeleton className='mb-1 h-6 w-24 bg-neutral-200' />
+        <Skeleton className='h-4 w-12 bg-neutral-200' />
       </div>
     </div>
   );