update

.eslintrc.cjs

@@ -2,7 +2,7 @@ const vitestFiles = ['app/**/__tests__/**/*', 'app/**/*.{spec,test}.*']
 const testFiles = ['**/tests/**', ...vitestFiles]
 const appFiles = ['app/**']
 
-/** @type {import('@types/eslint').Linter.BaseConfig} */
+/** @type {import('@types/eslint').Linter.Config} */
 module.exports = {
 	extends: [
 		'@remix-run/eslint-config',

app/components/account-ledger.tsx

@@ -0,0 +1,86 @@
+const people = [
+	{
+		name: 'Lindsay Walton',
+		title: 'Front-end Developer',
+		email: '[email protected]',
+		role: 'Member',
+	},
+	{
+		name: 'Lindsay Walton',
+		title: 'Front-end Developer',
+		email: '[email protected]',
+		role: 'Member',
+	},
+	{
+		name: 'Lindsay Walton',
+		title: 'Front-end Developer',
+		email: '[email protected]',
+		role: 'Member',
+	},
+	{
+		name: 'Lindsay Walton',
+		title: 'Front-end Developer',
+		email: '[email protected]',
+		role: 'Member',
+	},
+	// More people...
+]
+
+export default function AccountLedger() {
+	return (
+		<div className="flow-root">
+			<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+				<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+					<table className="min-w-full divide-y divide-gray-300">
+						<thead>
+							<tr className="divide-x divide-gray-200">
+								<th
+									scope="col"
+									className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-gray-900 sm:pl-0"
+								>
+									Name
+								</th>
+								<th
+									scope="col"
+									className="px-4 py-3.5 text-left text-sm font-semibold text-gray-900"
+								>
+									Title
+								</th>
+								<th
+									scope="col"
+									className="px-4 py-3.5 text-left text-sm font-semibold text-gray-900"
+								>
+									Email
+								</th>
+								<th
+									scope="col"
+									className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold text-gray-900 sm:pr-0"
+								>
+									Role
+								</th>
+							</tr>
+						</thead>
+						<tbody className="divide-y divide-gray-200 bg-white">
+							{people.map(person => (
+								<tr key={person.email} className="divide-x divide-gray-200">
+									<td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm font-medium text-gray-900 sm:pl-0">
+										{person.name}
+									</td>
+									<td className="whitespace-nowrap p-4 text-sm text-gray-500">
+										{person.title}
+									</td>
+									<td className="whitespace-nowrap p-4 text-sm text-gray-500">
+										{person.email}
+									</td>
+									<td className="whitespace-nowrap py-4 pl-4 pr-4 text-sm text-gray-500 sm:pr-0">
+										{person.role}
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+	)
+}

app/root.tsx

@@ -44,7 +44,6 @@ export const links: LinksFunction = () => {
 		// Preload svg sprite as a resource to avoid render blocking
 		{ rel: 'preload', href: iconsHref, as: 'image' },
 		// Preload CSS as a resource to avoid render blocking
-		{ rel: 'preload', href: tailwindStyleSheetUrl, as: 'style' },
 		{ rel: 'mask-icon', href: '/favicons/mask-icon.svg' },
 		{
 			rel: 'alternate icon',

app/routes/c.$companyId.sales+/__sale-editor.server.tsx

@@ -0,0 +1,98 @@
+import { parseWithZod } from '@conform-to/zod'
+import { json, type ActionFunctionArgs, redirect } from '@remix-run/node'
+import { z } from 'zod'
+import { prisma } from '#app/utils/db.server'
+import { requireCompanyUserWithRBAC } from '#app/utils/permissions.server'
+import { CompanySalesEditorSchema } from './__sale-editor'
+
+export async function action({ request, params }: ActionFunctionArgs) {
+	const user = await requireCompanyUserWithRBAC({
+		request,
+		companyId: params.companyId!,
+		permission: 'create:company-sale',
+		select: {
+			userCompanies: {
+				select: {
+					id: true,
+				},
+			},
+		},
+	})
+
+	const formData = await request.formData()
+
+	const submission = await parseWithZod(formData, {
+		schema: CompanySalesEditorSchema.superRefine(async (data, ctx) => {
+			const checkName = await prisma.company.findFirst({
+				where: {
+					accounts: {
+						some: {
+							name: data.name,
+						},
+					},
+				},
+			})
+
+			if (checkName) {
+				ctx.addIssue({
+					path: ['name'],
+					code: z.ZodIssueCode.custom,
+					message: 'Name already exists',
+				})
+			}
+		}),
+		async: true,
+	})
+
+	if (submission.status !== 'success') {
+		return json(
+			{ result: submission.reply() },
+			{ status: submission.status === 'error' ? 400 : 200 },
+		)
+	}
+
+	const {
+		id: saleId,
+		name,
+		uniqueId,
+		email,
+		phone,
+		address,
+		city,
+		state,
+		country,
+		zip,
+	} = submission.value
+
+	await prisma.account.upsert({
+		where: {
+			id: saleId ?? '__new_sale__',
+		},
+		create: {
+			name,
+			uniqueId,
+			email,
+			phone,
+			address,
+			city,
+			state,
+			country,
+			zip,
+			companyId: params.companyId!,
+			createdById: user.userCompanies[0].id,
+		},
+		update: {
+			name,
+			uniqueId,
+			email,
+			phone,
+			address,
+			city,
+			state,
+			country,
+			zip,
+		},
+	})
+
+	return redirect(`/c/${params.companyId}/sales`)
+}