\n Name\n \n

\n \n {t(\"shared.save\")}\n \n

\n \n \n );\n}\n```\n\ne.g. app/modules/invoices/components/InvoiceAddDialog.tsx\n\n```tsx\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useFetcher, useSearchParams } from \"react-router\";\nimport { toast } from \"sonner\";\nimport Modal from \"~/components/ui/modals/Modal\";\nimport { Button, ButtonProps } from \"~/components/ui/button\";\nimport { Label } from \"~/components/ui/label\";\nimport { Input } from \"~/components/ui/input\";\n\ntype Props = {};\nexport default function InvoiceAddDialog({}: Props) {\n const { t } = useTranslation();\n const fetcher = useFetcher<{ success?: string; error?: string }>();\n const [searchParams, setSearchParams] = useSearchParams();\n const isOpen = searchParams.get(\"add\") === \"true\";\n\n useEffect(() => {\n if (fetcher.data?.success) {\n toast.success(fetcher.data.success);\n searchParams.delete(\"add\");\n setSearchParams(searchParams, { preventScrollReset: true });\n } else if (fetcher.data?.error) {\n toast.error(fetcher.data.error);\n }\n }, [fetcher.data]);\n\n const mainInput = useRef(null);\n useEffect(() => {\n if (isOpen) {\n setTimeout(() => {\n mainInput.current?.focus();\n }, 100);\n }\n }, [isOpen]);\n\n function setIsOpen(open: boolean) {\n if (open) {\n searchParams.set(\"add\", \"true\");\n } else {\n searchParams.delete(\"add\");\n }\n setSearchParams(searchParams, { preventScrollReset: true });\n }\n\n return (\n

\n \n setIsOpen(false)}>\n

Add Invoice

Create a new invoice.

\n \n \n

\n \n Name *\n \n \n

\n\n

\n {\n setIsOpen(false);\n }}\n >\n {t(\"shared.cancel\")}\n \n\n \n

\n \n

\n );\n}\n```\n\n# Routes:\n\n## List route\n\ne.g. app/routes/app.$tenant/invoices\n\n```tsx\nimport { useTranslation } from \"react-i18next\";\nimport { ActionFunctionArgs, Link, LoaderFunctionArgs, redirect, useFetcher, useLoaderData, useParams } from \"react-router\";\nimport { Fragment, useEffect, useRef, useState } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport DropdownDots from \"~/components/ui/dropdowns/DropdownDots\";\nimport EditPageLayout from \"~/components/ui/layouts/EditPageLayout\";\nimport TableSimple from \"~/components/ui/tables/TableSimple\";\nimport { getPaginationFromCurrentUrl } from \"~/utils/helpers/RowPaginationHelper\";\nimport { requireAuth } from \"~/utils/loaders.middleware\";\nimport { getTenantIdFromUrl } from \"~/utils/services/.server/urlService\";\nimport InvoiceAddDialog from \"~/modules/invoices/components/InvoiceAddDialog\";\nimport ConfirmModal, { RefConfirmModal } from \"~/components/ui/modals/ConfirmModal\";\nimport { toast } from \"sonner\";\nimport { getTranslations } from \"~/locale/i18next.server\";\nimport { getInvoice, getInvoicesWithPagination, createInvoice, deleteInvoice } from \"~/modules/invoices/db/invoices.db.server\";\nimport InputSearchWithURL from \"~/components/ui/input/InputSearchWithURL\";\nimport { getUserInfo } from \"~/utils/session.server\";\nimport DateUtils from \"~/utils/shared/DateUtils\";\n\nexport const loader = async ({ request, params }: LoaderFunctionArgs) => {\n await requireAuth({ request, params });\n const tenantId = await getTenantIdFromUrl(params);\n const urlSearchParams = new URL(request.url).searchParams;\n const currentPagination = getPaginationFromCurrentUrl(urlSearchParams);\n const filters = {\n q: urlSearchParams.get(\"q\")?.toString(),\n };\n const { items, pagination } = await getInvoicesWithPagination({ tenantId, pagination: currentPagination, filters });\n return {\n items,\n pagination,\n };\n};\n\nexport const action = async ({ request, params }: ActionFunctionArgs) => {\n const { t } = await getTranslations(request);\n await requireAuth({ request, params });\n const tenantId = await getTenantIdFromUrl(params);\n const { userId } = await getUserInfo(request);\n const form = await request.formData();\n const action = form.get(\"action\")?.toString();\n if (action === \"create\") {\n try {\n const name = form.get(\"name\")?.toString();\n const lines = form.get(\"lines\")?.toString() ? JSON.parse(form.get(\"lines\")?.toString() || \"[]\") : undefined;\n invariant(name, \"Name is required\");\n const item = await createInvoice({\n tenantId,\n userId,\n name,\n lines,\n });\n return redirect(`/app/${params.tenant}/invoices/${item.id}`);\n } catch (e: any) {\n return { error: e.message };\n }\n } else if (action === \"delete\") {\n const id = form.get(\"id\")?.toString() || \"\";\n const item = await getInvoice({ id, tenantId });\n if (!item) return Response.json(t(\"shared.notFound\"), { status: 404 });\n try {\n await deleteInvoice({ item });\n return { success: t(\"shared.deleted\") };\n } catch (e: any) {\n return { error: e.message };\n }\n }\n return {};\n};\n\nexport default function () {\n const { t } = useTranslation();\n const data = useLoaderData();\n const params = useParams();\n\n const fetcher = useFetcher<{ success?: string; error?: string }>();\n\n useEffect(() => {\n if (fetcher.data?.success) {\n toast.success(fetcher.data.success);\n } else if (fetcher.data?.error) {\n toast.error(fetcher.data.error);\n }\n }, [fetcher.data]);\n\n const [searchInput, setSearchInput] = useState(\"\");\n const filteredItems = data.items.filter((item) => item.name.toLowerCase().includes(searchInput.toLowerCase()));\n\n function onDelete(id: string) {\n confirmDelete.current?.setValue(id);\n confirmDelete.current?.show(t(\"shared.confirmDelete\"), t(\"shared.delete\"), t(\"shared.cancel\"), t(\"shared.warningCannotUndo\"));\n }\n const confirmDelete = useRef(null);\n function onDeleteConfirmed(id: string) {\n const form = new FormData();\n form.append(\"action\", \"delete\");\n form.append(\"id\", id);\n fetcher.submit(form, { method: \"post\" });\n }\n return (\n \n \n \n \n }\n >\n (\n

\n \n

{item.name}

\n \n

\n ),\n },\n {\n title: t(\"shared.createdAt\"),\n value: (i) =>

{DateUtils.dateAgo(i.updatedAt || i.createdAt)}

,\n },\n {\n name: \"createdBy\",\n title: t(\"shared.createdBy\"),\n value: (i) =>

{i.user?.email || i.user?.email}

,\n },\n {\n title: \"\",\n value: (item) => (\n

\n onDelete(item.id),\n },\n ]}\n />\n

\n ),\n },\n ]}\n />\n \n \n );\n}\n```\n\n## Details route\n\ne.g. app/routes/app.$tenant/invoices/$id.tsx\n\n```tsx\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ActionFunctionArgs, LoaderFunctionArgs, redirect, useFetcher, useLoaderData, useParams, useSearchParams } from \"react-router\";\nimport { toast } from \"sonner\";\nimport BackButtonWithTitle from \"~/components/ui/buttons/BackButtonWithTitle\";\nimport ButtonPrimary from \"~/components/ui/buttons/ButtonPrimary\";\nimport ServerError from \"~/components/ui/errors/ServerError\";\nimport EditPageLayout from \"~/components/ui/layouts/EditPageLayout\";\nimport ConfirmModal, { RefConfirmModal } from \"~/components/ui/modals/ConfirmModal\";\nimport SettingSection from \"~/components/ui/sections/SettingSection\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"~/components/ui/tabs\";\nimport { getTranslations } from \"~/locale/i18next.server\";\nimport InvoiceEditForm from \"~/modules/invoices/components/InvoiceEditForm\";\nimport { deleteInvoice, getInvoice, updateInvoice } from \"~/modules/invoices/db/invoices.db.server\";\nimport { InvoiceDto } from \"~/modules/invoices/dtos/InvoiceDto\";\nimport { db } from \"~/utils/db.server\";\nimport { requireAuth } from \"~/utils/loaders.middleware\";\nimport { getTenantIdFromUrl } from \"~/utils/services/.server/urlService\";\n\ntype LoaderData = {\n item: InvoiceDto;\n};\nexport const loader = async ({ request, params }: LoaderFunctionArgs) => {\n const { t } = await getTranslations(request);\n await requireAuth({ request, params });\n const tenantId = await getTenantIdFromUrl(params);\n let item = await getInvoice({ id: params.id!, tenantId });\n if (!item) return Response.json(t(\"shared.notFound\"), { status: 404 });\n\n const data: LoaderData = {\n item,\n };\n return Response.json(data);\n};\n\nexport const action = async ({ request, params }: ActionFunctionArgs) => {\n const { t } = await getTranslations(request);\n await requireAuth({ request, params });\n const tenantId = await getTenantIdFromUrl(params);\n const item = await getInvoice({ id: params.id!, tenantId });\n if (!item) {\n return Response.json(t(\"shared.notFound\"), { status: 404 });\n }\n const form = await request.formData();\n const action = form.get(\"action\")?.toString();\n if (action === \"edit\") {\n try {\n const name = form.get(\"name\")?.toString();\n const lines = form.get(\"lines\")?.toString() ? JSON.parse(form.get(\"lines\")?.toString() || \"[]\") : undefined;\n await updateInvoice({\n item,\n name,\n lines,\n });\n return { success: t(\"shared.updated\") };\n } catch (e: any) {\n return { error: e.message };\n }\n } else if (action === \"delete\") {\n try {\n await deleteInvoice({ item });\n return redirect(`/app/${params.tenant}/invoices`);\n } catch (e: any) {\n return { error: e.message };\n }\n }\n\n return { error: \"Invalid action\" };\n};\n\nexport default function () {\n const { t } = useTranslation();\n const data = useLoaderData();\n const fetcher = useFetcher<{ success?: string; error?: string }>();\n const params = useParams();\n\n useEffect(() => {\n if (fetcher.data?.success) {\n toast.success(fetcher.data.success);\n } else if (fetcher.data?.error) {\n toast.error(fetcher.data.error);\n }\n }, [fetcher.data]);\n\n function onDelete() {\n confirmDelete.current?.show(t(\"shared.confirmDelete\"), t(\"shared.delete\"), t(\"shared.cancel\"), t(\"shared.warningCannotUndo\"));\n }\n const confirmDelete = useRef(null);\n function onDeleteConfirmed() {\n const form = new FormData();\n form.append(\"action\", \"delete\");\n fetcher.submit(form, { method: \"post\" });\n }\n\n const [searchParams, setSearchParams] = useSearchParams();\n const tabs = [\n { value: \"general\", name: \"General\" },\n { value: \"danger\", name: \"Danger\" },\n ];\n const currentTab = searchParams.get(\"tab\") || \"general\";\n\n return (\n \n {data.item.name}\n \n }\n >\n

\n {\n if (e === \"general\") {\n searchParams.delete(\"tab\");\n } else {\n searchParams.set(\"tab\", e);\n }\n setSearchParams(searchParams);\n }}\n >\n \n {tabs.map((tab) => (\n \n {tab.name}\n \n ))}\n \n

\n \n \n \n \n \n

{t(\"shared.warningCannotUndo\")}

\n \n {t(\"shared.delete\")}\n \n

\n \n \n

\n \n

\n\n \n \n );\n}\n\nexport function ErrorBoundary() {\n return ;\n}\n```\n","contentMarkdown","# Creating a CRUD feature/module:\n\nAssuming we're building an \"Invoicing\" feature, here's the architecture:\n\n- Routes: app/routes/app.$tenant/invoices\n- Module: app/modules/invoices/\n - /components: any React components\n - /db: e.g. getInvoicesWithPagination(...)\n - /dtos: when Prisma models need to be extended or simplified for the frontend\n - /services: business logic, e.g. createInvoice that also sends an email\n - /utils: backend + frontend utils, e.g. calculateTotalFromLines\n- AppSidebar: Update the sidebar to include the new feature\n\n* Keep it simple but functional.\n\n## Database models:\n\nAt prisma/schema/:\n\n- app.prisma: Custom models go here\n- accounts.prisma: Tenant, User, TenantUser...\n- core.prisma: AppConfiguraton, Log...\n\nAfter updating the schema, run: `npx prisma db push`\n\nNEVER run: `npx prisma generate`, nor use the flags `--force-reset ` or `--accept-data-loss`\n\n```prisma\n// add your database models\n\nmodel Invoice {\n id String @id @default(cuid())\n createdAt DateTime @default(now())\n updatedAt DateTime @updatedAt\n name String\n lines Json\n tenantId String\n tenant Tenant @relation(fields: [tenantId], references: [id])\n userId String\n user User @relation(fields: [userId], references: [id])\n}\n```\n\ne.g. prisma/schema/accounts.prisma\n\n```prisma\nmodel User {\n id String @id @default(cuid())\n createdAt DateTime @default(now())\n updatedAt DateTime @updatedAt\n email String @unique\n passwordHash String\n firstName String\n lastName String\n avatar String?\n phone String?\n defaultTenantId String?\n verifyToken String?\n githubId String? @unique\n googleId String? @unique\n locale String?\n active Boolean @default(false)\n admin AdminUser? // Has access to the admin panel\n createdApiKeys ApiKey[]\n createdGroups Group[]\n groups GroupUser[]\n createdLinkedAccounts LinkedAccount[]\n logs Log[]\n createdRows Row[]\n createdRowComments RowComment[]\n createdRowCommentReactions RowCommentReaction[]\n createdEntityViews EntityView[] @relation(\"createdByUser\")\n rowPermissions RowPermission[]\n assignedTasks RowTask[] @relation(\"assignedToUser\")\n completedTasks RowTask[] @relation(\"completedByUser\")\n createdRowTasks RowTask[] @relation(\"createdByUser\")\n tenants TenantUser[]\n invitation TenantUserInvitation? @relation(\"createdUser\")\n sentInvitations TenantUserInvitation[] @relation(\"fromUser\")\n roles UserRole[]\n readEmails EmailRead[]\n entityViews EntityView[]\n onboardingSessions OnboardingSession[]\n tenantIpAddresses TenantIpAddress[]\n promptFlowExecutions PromptFlowExecution[]\n analyticsUniqueSessions AnalyticsUniqueVisitor[]\n metricLogs MetricLog[]\n formulaLogs FormulaLog[]\n createdTenantRelationships TenantRelationship[]\n blogArticles BlogPost[]\n knowledgeBaseArticles KnowledgeBaseArticle[]\n events Event[]\n workflowsCreated Workflow[] @relation(\"createdByUser\")\n workflowsExecuted WorkflowExecution[] @relation(\"executedByUser\")\n workflowVariablesCreated WorkflowVariable[]\n workflowCredentialsCreated WorkflowCredential[]\n feedback Feedback[]\n credits Credit[]\n portals Portal[]\n invoices Invoice[]\n}\n\n// Has access to the admin panel\nmodel AdminUser {\n userId String @unique\n user User @relation(fields: [userId], references: [id], onDelete: Cascade)\n}\n\nmodel Tenant {\n id String @id @default(cuid())\n createdAt DateTime @default(now())\n updatedAt DateTime @updatedAt\n slug String @unique\n name String\n icon String?\n subscriptionId String?\n active Boolean @default(false)\n deactivatedReason String?\n apiKeys ApiKey[]\n apiKeyLogs ApiKeyLog[]\n groups Group[]\n asClientLinkedAccounts LinkedAccount[] @relation(\"clientTenant\")\n createdLinkedAccounts LinkedAccount[] @relation(\"createdByTenant\")\n asProviderLinkedAccounts LinkedAccount[] @relation(\"providerTenant\")\n logs Log[]\n rows Row[]\n rowPermissions RowPermission[]\n subscription TenantSubscription?\n users TenantUser[]\n invitations TenantUserInvitation[]\n userRoles UserRole[]\n inboundAddresses TenantInboundAddress[]\n events Event[]\n fromRegistration Registration?\n entityViews EntityView[]\n emailSenders EmailSender[]\n campaigns Campaign[]\n outboundEmails OutboundEmail[]\n onboardingSessions OnboardingSession[]\n ipAddresses TenantIpAddress[]\n tenantSettingsRow TenantSettingsRow?\n promptFlowExecutions PromptFlowExecution[]\n metricLogs MetricLog[]\n formulaLogs FormulaLog[]\n types TenantType[]\n fromTenants TenantRelationship[] @relation(\"fromTenant\")\n toTenants TenantRelationship[] @relation(\"toTenant\")\n entityProperties Property[]\n blogPosts BlogPost[]\n blogTags BlogTag[]\n blogCategories BlogCategory[]\n entityGroupConfigurations EntityGroupConfiguration[]\n entityTemplates EntityTemplate[]\n workflows Workflow[]\n workflowExecutions WorkflowExecution[]\n workflowVariables WorkflowVariable[]\n workflowCredentials WorkflowCredential[]\n feedback Feedback[]\n credits Credit[]\n portals Portal[]\n portalsUsers PortalUser[]\n surveys Survey[]\n widgets Widget[]\n invoices Invoice[]\n\n @@index([slug])\n}\n// ...\n```\n\n## DTOS:\n\ne.g. app/modules/invoices/dtos\n\n```tsx\nimport { Invoice } from \"@prisma/client\";\nimport { JsonValue } from \"@prisma/client/runtime/library\";\n\nexport type InvoiceDto = Invoice & {\n id: string;\n name: string;\n lines: JsonValue;\n};\n\nexport type InvoiceLineDto = {\n name: string;\n price: number;\n quantity: number;\n};\n```\n\n## DB calls:\n\ne.g. app/modules/invoices/db/invoices.db.server.ts\n\n```tsx\nimport { db } from \"~/utils/db.server\";\nimport { InvoiceDto, InvoiceLineDto } from \"../dtos/InvoiceDto\";\nimport { Prisma } from \"@prisma/client\";\n\nexport const getInvoice = async ({ id, tenantId }: { id: string; tenantId: string }) => {\n return db.invoice.findUnique({\n where: { id, tenantId },\n });\n};\n\nexport const getInvoicesWithPagination = async ({\n tenantId,\n pagination,\n filters,\n}: {\n tenantId: string;\n pagination?: { page: number; pageSize: number };\n filters: {\n q?: string;\n };\n}) => {\n let where: Prisma.InvoiceWhereInput = { tenantId };\n if (filters.q) {\n where = {\n ...where,\n OR: [\n { name: { contains: filters.q } },\n // { otherTextField: { contains: filters.q } },\n ],\n };\n }\n const items = await db.invoice.findMany({\n take: pagination?.pageSize,\n skip: pagination ? pagination.pageSize * (pagination.page - 1) : undefined,\n where,\n orderBy: { createdAt: \"desc\" },\n include: {\n user: { select: { email: true } },\n },\n });\n if (!pagination) {\n return { items };\n }\n const totalItems = await db.invoice.count({\n where,\n });\n return {\n items,\n pagination: {\n page: pagination.page,\n pageSize: pagination.pageSize,\n totalItems,\n totalPages: Math.ceil(totalItems / pagination.pageSize),\n },\n };\n};\nexport const createInvoice = async ({ tenantId, userId, name, lines }: { tenantId: string; userId: string; name: string; lines: InvoiceLineDto[] }) => {\n return await db.invoice.create({\n data: {\n tenantId,\n userId,\n name,\n lines: lines || [],\n },\n });\n};\n\nexport const updateInvoice = async ({ item, name, lines }: { item: InvoiceDto; name?: string; lines?: InvoiceLineDto[] }) => {\n return await db.invoice.update({\n where: { id: item.id },\n data: {\n name,\n lines,\n },\n });\n};\n\nexport const deleteInvoice = async ({ item }: { item: InvoiceDto }) => {\n return await db.invoice.delete({\n where: {\n id: item.id,\n },\n });\n};\n```\n\n## Components\n\ne.g. app/modules/invoices/components/InvoiceEditForm.tsx\n\n```tsx\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useFetcher } from \"react-router\";\nimport { toast } from \"sonner\";\nimport { Button } from \"~/components/ui/button\";\nimport { Input } from \"~/components/ui/input\";\nimport { Label } from \"~/components/ui/label\";\nimport SettingSection from \"~/components/ui/sections/SettingSection\";\nimport { cn } from \"~/lib/utils\";\nimport { InvoiceDto } from \"../dtos/InvoiceDto\";\n\ninterface Props {\n item: InvoiceDto;\n}\nexport default function InvoiceEditForm({ item }: Props) {\n const { t } = useTranslation();\n const fetcher = useFetcher<{ success?: string; error?: string }>();\n\n useEffect(() => {\n if (fetcher.data?.success) {\n toast.success(fetcher.data.success);\n } else if (fetcher.data?.error) {\n toast.error(fetcher.data.error);\n }\n }, [fetcher.data]);\n\n const mainInput = useRef(null);\n useEffect(() => {\n setTimeout(() => {\n mainInput.current?.focus();\n }, 100);\n }, []);\n\n return (\n \n \n \n

\n Name\n \n

\n \n {t(\"shared.save\")}\n \n

\n \n setIsOpen(false)}>\n

Add Invoice

Create a new invoice.

\n \n \n

\n \n Name *\n \n \n

\n\n

\n {\n setIsOpen(false);\n }}\n >\n {t(\"shared.cancel\")}\n \n\n \n

\n \n

{item.name}

\n \n

\n ),\n },\n {\n title: t(\"shared.createdAt\"),\n value: (i) =>

{DateUtils.dateAgo(i.updatedAt || i.createdAt)}

,\n },\n {\n name: \"createdBy\",\n title: t(\"shared.createdBy\"),\n value: (i) =>

{i.user?.email || i.user?.email}

,\n },\n {\n title: \"\",\n value: (item) => (\n

\n onDelete(item.id),\n },\n ]}\n />\n

\n \n \n \n \n \n

{t(\"shared.warningCannotUndo\")}

\n \n {t(\"shared.delete\")}\n \n

\n \n \n

\n \n

\n\n \n \n );\n}\n\nexport function ErrorBoundary() {\n return ;\n}\n```",{"_319":315,"_272":324,"_321":324},"# SaasRock Development Guide\n\n## Commands\n\n- `npm run dev` - Start the development server\n- `npm run build` - Build the application\n- `npm run lint` - Run ESLint\n- `npm run test` - Run all tests\n- `npx vitest app/path/to/test.ts` - Run a single test\n- `npm run typecheck` - Check TypeScript types\n- `npm run prettier` - Format code with Prettier\n\n## Code Style\n\n- **Formatting**: 2 spaces indentation, 160 character line width, double quotes\n- **Types**: Use TypeScript with strict mode enabled\n- **Naming**: PascalCase for components/classes, camelCase for functions/variables\n- **Imports**: Group by external libraries then internal modules\n- **React**: Use functional components with hooks\n- **Error Handling**: Use try/catch blocks with custom error types\n- **CSS**: Use Tailwind utility classes\n- **Testing**: Use Vitest for unit tests\n\n## Important Notes\n\n- Always run `npm run typecheck` before committing changes\n- Avoid console.log in production code (ESLint will warn)\n- Follow existing patterns in the codebase\n\n---\n\n# Creating a CRUD feature/module:\n\nAssuming we're building an \"Invoicing\" feature, here's the architecture:\n\n- Routes: app/routes/app.$tenant/invoices\n- Module: app/modules/invoices/\n - /components: any React components\n - /db: e.g. getInvoicesWithPagination(...)\n - /dtos: when Prisma models need to be extended or simplified for the frontend\n - /services: business logic, e.g. createInvoice that also sends an email\n - /utils: backend + frontend utils, e.g. calculateTotalFromLines\n- AppSidebar: Update the sidebar to include the new feature\n\n* Keep it simple but functional.\n\n## Database models:\n\nAt prisma/schema/:\n\n- app.prisma: Custom models go here\n- accounts.prisma: Tenant, User, TenantUser...\n- core.prisma: AppConfiguraton, Log...\n\nAfter updating the schema, run: `npx prisma db push`\n\nNEVER run: `npx prisma generate`, nor use the flags `--force-reset ` or `--accept-data-loss`\n\n```prisma\n// add your database models\n\nmodel Invoice {\n id String @id @default(cuid())\n createdAt DateTime @default(now())\n updatedAt DateTime @updatedAt\n name String\n lines Json\n tenantId String\n tenant Tenant @relation(fields: [tenantId], references: [id])\n userId String\n user User @relation(fields: [userId], references: [id])\n}\n```\n\ne.g. prisma/schema/accounts.prisma\n\n```prisma\nmodel User {\n id String @id @default(cuid())\n createdAt DateTime @default(now())\n updatedAt DateTime @updatedAt\n email String @unique\n passwordHash String\n firstName String\n lastName String\n avatar String?\n phone String?\n defaultTenantId String?\n verifyToken String?\n githubId String? @unique\n googleId String? @unique\n locale String?\n active Boolean @default(false)\n admin AdminUser? // Has access to the admin panel\n createdApiKeys ApiKey[]\n createdGroups Group[]\n groups GroupUser[]\n createdLinkedAccounts LinkedAccount[]\n logs Log[]\n createdRows Row[]\n createdRowComments RowComment[]\n createdRowCommentReactions RowCommentReaction[]\n createdEntityViews EntityView[] @relation(\"createdByUser\")\n rowPermissions RowPermission[]\n assignedTasks RowTask[] @relation(\"assignedToUser\")\n completedTasks RowTask[] @relation(\"completedByUser\")\n createdRowTasks RowTask[] @relation(\"createdByUser\")\n tenants TenantUser[]\n invitation TenantUserInvitation? @relation(\"createdUser\")\n sentInvitations TenantUserInvitation[] @relation(\"fromUser\")\n roles UserRole[]\n readEmails EmailRead[]\n entityViews EntityView[]\n onboardingSessions OnboardingSession[]\n tenantIpAddresses TenantIpAddress[]\n promptFlowExecutions PromptFlowExecution[]\n analyticsUniqueSessions AnalyticsUniqueVisitor[]\n metricLogs MetricLog[]\n formulaLogs FormulaLog[]\n createdTenantRelationships TenantRelationship[]\n blogArticles BlogPost[]\n knowledgeBaseArticles KnowledgeBaseArticle[]\n events Event[]\n workflowsCreated Workflow[] @relation(\"createdByUser\")\n workflowsExecuted WorkflowExecution[] @relation(\"executedByUser\")\n workflowVariablesCreated WorkflowVariable[]\n workflowCredentialsCreated WorkflowCredential[]\n feedback Feedback[]\n credits Credit[]\n portals Portal[]\n invoices Invoice[]\n}\n\n// Has access to the admin panel\nmodel AdminUser {\n userId String @unique\n user User @relation(fields: [userId], references: [id], onDelete: Cascade)\n}\n\nmodel Tenant {\n id String @id @default(cuid())\n createdAt DateTime @default(now())\n updatedAt DateTime @updatedAt\n slug String @unique\n name String\n icon String?\n subscriptionId String?\n active Boolean @default(false)\n deactivatedReason String?\n apiKeys ApiKey[]\n apiKeyLogs ApiKeyLog[]\n groups Group[]\n asClientLinkedAccounts LinkedAccount[] @relation(\"clientTenant\")\n createdLinkedAccounts LinkedAccount[] @relation(\"createdByTenant\")\n asProviderLinkedAccounts LinkedAccount[] @relation(\"providerTenant\")\n logs Log[]\n rows Row[]\n rowPermissions RowPermission[]\n subscription TenantSubscription?\n users TenantUser[]\n invitations TenantUserInvitation[]\n userRoles UserRole[]\n inboundAddresses TenantInboundAddress[]\n events Event[]\n fromRegistration Registration?\n entityViews EntityView[]\n emailSenders EmailSender[]\n campaigns Campaign[]\n outboundEmails OutboundEmail[]\n onboardingSessions OnboardingSession[]\n ipAddresses TenantIpAddress[]\n tenantSettingsRow TenantSettingsRow?\n promptFlowExecutions PromptFlowExecution[]\n metricLogs MetricLog[]\n formulaLogs FormulaLog[]\n types TenantType[]\n fromTenants TenantRelationship[] @relation(\"fromTenant\")\n toTenants TenantRelationship[] @relation(\"toTenant\")\n entityProperties Property[]\n blogPosts BlogPost[]\n blogTags BlogTag[]\n blogCategories BlogCategory[]\n entityGroupConfigurations EntityGroupConfiguration[]\n entityTemplates EntityTemplate[]\n workflows Workflow[]\n workflowExecutions WorkflowExecution[]\n workflowVariables WorkflowVariable[]\n workflowCredentials WorkflowCredential[]\n feedback Feedback[]\n credits Credit[]\n portals Portal[]\n portalsUsers PortalUser[]\n surveys Survey[]\n widgets Widget[]\n invoices Invoice[]\n\n @@index([slug])\n}\n// ...\n```\n\n## DTOS:\n\ne.g. app/modules/invoices/dtos\n\n```tsx\nimport { Invoice } from \"@prisma/client\";\nimport { JsonValue } from \"@prisma/client/runtime/library\";\n\nexport type InvoiceDto = Invoice & {\n id: string;\n name: string;\n lines: JsonValue;\n};\n\nexport type InvoiceLineDto = {\n name: string;\n price: number;\n quantity: number;\n};\n```\n\n## DB calls:\n\ne.g. app/modules/invoices/db/invoices.db.server.ts\n\n```tsx\nimport { db } from \"~/utils/db.server\";\nimport { InvoiceDto, InvoiceLineDto } from \"../dtos/InvoiceDto\";\nimport { Prisma } from \"@prisma/client\";\n\nexport const getInvoice = async ({ id, tenantId }: { id: string; tenantId: string }) => {\n return db.invoice.findUnique({\n where: { id, tenantId },\n });\n};\n\nexport const getInvoicesWithPagination = async ({\n tenantId,\n pagination,\n filters,\n}: {\n tenantId: string;\n pagination?: { page: number; pageSize: number };\n filters: {\n q?: string;\n };\n}) => {\n let where: Prisma.InvoiceWhereInput = { tenantId };\n if (filters.q) {\n where = {\n ...where,\n OR: [\n { name: { contains: filters.q } },\n // { otherTextField: { contains: filters.q } },\n ],\n };\n }\n const items = await db.invoice.findMany({\n take: pagination?.pageSize,\n skip: pagination ? pagination.pageSize * (pagination.page - 1) : undefined,\n where,\n orderBy: { createdAt: \"desc\" },\n include: {\n user: { select: { email: true } },\n },\n });\n if (!pagination) {\n return { items };\n }\n const totalItems = await db.invoice.count({\n where,\n });\n return {\n items,\n pagination: {\n page: pagination.page,\n pageSize: pagination.pageSize,\n totalItems,\n totalPages: Math.ceil(totalItems / pagination.pageSize),\n },\n };\n};\nexport const createInvoice = async ({ tenantId, userId, name, lines }: { tenantId: string; userId: string; name: string; lines: InvoiceLineDto[] }) => {\n return await db.invoice.create({\n data: {\n tenantId,\n userId,\n name,\n lines: lines || [],\n },\n });\n};\n\nexport const updateInvoice = async ({ item, name, lines }: { item: InvoiceDto; name?: string; lines?: InvoiceLineDto[] }) => {\n return await db.invoice.update({\n where: { id: item.id },\n data: {\n name,\n lines,\n },\n });\n};\n\nexport const deleteInvoice = async ({ item }: { item: InvoiceDto }) => {\n return await db.invoice.delete({\n where: {\n id: item.id,\n },\n });\n};\n```\n\n## Components\n\ne.g. app/modules/invoices/components/InvoiceEditForm.tsx\n\n```tsx\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useFetcher } from \"react-router\";\nimport { toast } from \"sonner\";\nimport { Button } from \"~/components/ui/button\";\nimport { Input } from \"~/components/ui/input\";\nimport { Label } from \"~/components/ui/label\";\nimport SettingSection from \"~/components/ui/sections/SettingSection\";\nimport { cn } from \"~/lib/utils\";\nimport { InvoiceDto } from \"../dtos/InvoiceDto\";\n\ninterface Props {\n item: InvoiceDto;\n}\nexport default function InvoiceEditForm({ item }: Props) {\n const { t } = useTranslation();\n const fetcher = useFetcher<{ success?: string; error?: string }>();\n\n useEffect(() => {\n if (fetcher.data?.success) {\n toast.success(fetcher.data.success);\n } else if (fetcher.data?.error) {\n toast.error(fetcher.data.error);\n }\n }, [fetcher.data]);\n\n const mainInput = useRef(null);\n useEffect(() => {\n setTimeout(() => {\n mainInput.current?.focus();\n }, 100);\n }, []);\n\n return (\n \n \n \n

\n Name\n \n

\n \n {t(\"shared.save\")}\n \n

\n \n setIsOpen(false)}>\n

Add Invoice

Create a new invoice.

\n \n \n

\n \n Name *\n \n \n

\n\n

\n {\n setIsOpen(false);\n }}\n >\n {t(\"shared.cancel\")}\n \n\n \n

\n \n

{item.name}

\n \n

\n ),\n },\n {\n title: t(\"shared.createdAt\"),\n value: (i) =>

{DateUtils.dateAgo(i.updatedAt || i.createdAt)}

,\n },\n {\n name: \"createdBy\",\n title: t(\"shared.createdBy\"),\n value: (i) =>

{i.user?.email || i.user?.email}

,\n },\n {\n title: \"\",\n value: (item) => (\n

\n onDelete(item.id),\n },\n ]}\n />\n

\n \n \n \n \n \n

{t(\"shared.warningCannotUndo\")}

\n \n {t(\"shared.delete\")}\n \n

\n \n \n

\n \n

\n\n \n \n );\n}\n\nexport function ErrorBoundary() {\n return ;\n}\n```\n","videos",[327],{"_8":328,"_46":329},"Demo","https://www.loom.com/embed/2e605d846f1a4d80b96237d278b6a12a?sid=5b685365-12f1-44f5-a5fb-b25d32086ec4","screenshots",[],"author",{"_45":334,"_335":336},"Alexandro Martinez","avatarUrl","https://avatars.githubusercontent.com/u/8606530?v=4","createdAt",["D",1742810400000],"updatedAt",["D",1742810400000],"isPinned",[343,347,348,351],{"_344":314,"_345":346},"tag","count",1,{"_344":315,"_345":346},{"_344":349,"_345":350},"Windsurf",0,{"_344":311,"_345":346},"selectedTag",{"_354":315,"_45":315,"_193":355},"value","Claude Code rules for building full-stack SaaS features","routes/ai.rules/index",{"_5":358,"_372":373,"_385":386,"_309":387,"_352":353},[359,361,362,363,364,365,366,367,368,369,370,371],{"_8":360},"Claude Code | SaasRock | The B2B SaaS Boilerplate for Remix (React Router 7)",{"_45":193,"_272":273},{"_275":276,"_272":360},{"_275":278,"_272":273},{"_275":280,"_272":13},{"_282":283,"_284":285,"_131":286},{"_275":288,"_272":286},{"_282":283,"_284":290,"_131":286,"_291":13},{"_282":283,"_284":290,"_131":293,"_291":294},{"_282":283,"_284":290,"_131":296,"_291":297},{"_282":283,"_284":290,"_131":299,"_291":300},{"_282":283,"_284":290,"_131":286,"_291":302},"allRules",[374],{"_76":306,"_8":307,"_193":308,"_309":375,"_312":376,"_316":377,"_325":380,"_330":382,"_332":333,"_337":383,"_339":384,"_341":60},[311],[314,315],[378,379],{"_319":314,"_272":320,"_321":322},{"_319":315,"_272":324,"_321":324},[381],{"_8":328,"_46":329},[],["D",1742810400000],["D",1742810400000],"featuredRules",[374],[388,389,390,391],{"_344":314,"_345":346},{"_344":315,"_345":346},{"_344":349,"_345":350},{"_344":311,"_345":346},"actionData","errors"]

Claude Code

CRUD Example