...
// export const runtime = 'edge'
...

import { drizzle } from 'drizzle-orm/postgres-js';
import postgres from 'postgres';

export const sql = postgres(process.env.DATABASE_URL!);
export const db = drizzle(sql);

import { config } from "dotenv";
import { drizzle } from 'drizzle-orm/postgres-js';
import { migrate } from 'drizzle-orm/postgres-js/migrator';
import postgres from 'postgres';

config({ path:".env.local"});

const sql = postgres(process.env.DATABASE_URL!);
const db = drizzle(sql);

const main = async () => {""
  try {
    await migrate(db, { migrationsFolder: "drizzle" });
  } catch (error) {
    console.error("Error during migration:", error );
    process.exit();
  }
};

main();

npm i react-select
npm i date-fns@3.0.0
npm i react-day-picker
npm i react-currency-input-field

npx shadcn@latest add calender
npx shadcn@latest add popover 
npx shadcn@latest add textarea 
npx shadcn@latest add tooltip

...
export const categories = pgTable("categories", {
  id: text("id").primaryKey(),
  plaidId: text("plaid_id"),
  name: text("name").notNull(),
  userId: text("user_id").notNull(),
})

export const insertCategoriesSchema = createInsertSchema(categories);
...

npm run db:generate
npm run db:migrate
npm run db:studio  

...
.get(
    "/:id",
    zValidator("param",z.object({ 
      id: z.string().optional(),
    })),
    clerkMiddleware(),
    async (c) => {
      const auth = getAuth(c);
      const { id } = c.req.valid("param");

      if (!id) {
        return c.json({ error: "Missing id!" }, 400);
      }

      if (!auth?.userId) {
        return c.json({ error: "Unauthorized!" }, 401);
      }

      const [data] = await db
        .select({
          id: accounts.id,
          name: accounts.name,
        })
        .from(accounts)
        .where(
          and(
            eq(accounts.userId, auth.userId),
            eq(accounts.id, id)
        ),
      );

      if (!data) {
        return c.json({ error: "Not Found!"}, 404);
      };
  
      return c.json({ data });
    }
  )
...

"use client"
import { InferResponseType } from "hono";
import { ColumnDef } from "@tanstack/react-table";
import { ArrowUpDown } from "lucide-react";

import { client } from "@/lib/hono";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";

export type ResponsType = InferResponseType<typeof client.api.accounts.$get, 200>["data"][0];

export const columns: ColumnDef<ResponsType>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "name",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Name
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },
  },
]

...
import {
...
  getPaginationRowModel,
...
} from "@tanstack/react-table"
...
...
const table = useReactTable({
...
    getPaginationRowModel: getPaginationRowModel(),
...
  })
...
return (
    <div>
      <div className="rounded-md border">
        ...
      </div>
      <div className="flex items-center justify-end space-x-2 py-4">
        <Button
          variant="outline"
          size="sm"
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
        >
          Previous
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => table.nextPage()}
          disabled={!table.getCanNextPage()}
        >
          Next
        </Button>
      </div>
    </div>
  )
...

npx shadcn@latest add card

"use client";

import { Plus } from "lucide-react";
import { useNewAccount } from "@/features/accounts/hooks/use-new-account";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

import { Payment, columns } from "./columns";
import { DataTable } from "@/components/data-table";

const data: Payment[] = [
  { 
    id: "728ed52f",
    amount: 100,
    status: "pending",
    email: "m@example.com",
  },
];

const AccountsPage = ()=> {
  const newAccount = useNewAccount();

  return (
    <div className="max-w-screen-2xl mx-auto w-full pb-10 -mt-24">
      <Card className="border-none drop-shadow-sm">
        <CardHeader className="gap-y-2 lg:flex-row lg:items-center lg:justify-between">
          <CardTitle className="text-xl line-clamp-1">
            Account Page
          </CardTitle>
          <Button onClick={newAccount.onOpen} size="sm">
            <Plus className="size-4 mr-2" />
            Add New
          </Button>
        </CardHeader>
        <CardContent>
          <DataTable columns={columns} data={data} />
        </CardContent>
      </Card>
    </div>
  );
};

export default AccountsPage;

npx shadcn@latest add form
npx shadcn@latest add input
npx shadcn@latest add sonner

npm i zustand

npm i drizzle-zod
npm i @hono/zod-validator

npm install --save @paralleldrive/cuid2

import { Hono } from "hono";
import { zValidator } from "@hono/zod-validator";
import { createId } from "@paralleldrive/cuid2";
import { clerkMiddleware, getAuth } from "@hono/clerk-auth";

import {db} from "@/db/drizzle";
import {accounts, insertAccountSchema} from "@/db/schema";
import { eq } from "drizzle-orm";

const app = new Hono()
  .get("/", clerkMiddleware(), async (c) => {
    const auth = getAuth(c);
    
    if( !auth?.userId ) {
      return c.json({ error:"Unauthorized!"}, 401);
    }

    const data = await db.select({
      id: accounts.id,
      name: accounts.name,
    }).from(accounts)
    .where(eq(accounts.userId, auth.userId));

    return c.json({ accounts: data });
  })
  .post(
    "/",
    clerkMiddleware(), 
    zValidator('json',insertAccountSchema.pick({
      name:true,
    })),
    async(c) => {
      const auth = getAuth(c);
      const values = c.req.valid("json");

      if(!auth?.userId){
        return c.json({ error:"Unauthorized!"}, 401);
      }

      const data = await db.insert(accounts).values({
        id: createId(),
        userId: auth.userId,
        ...values,
      }).returning();

      return c.json({ data });
    })

export default app;