create new customer accounts

app/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 			<input
 				type={type}
 				className={cn(
-					'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid',
+					'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid',
 					className,
 				)}
 				ref={ref}

app/routes/_auth+/login.tsx

@@ -204,6 +204,7 @@ export async function action({ request }: ActionFunctionArgs) {
 	await requireAnonymous(request)
 	const formData = await request.formData()
 	checkHoneypot(formData)
+
 	const submission = await parseWithZod(formData, {
 		schema: intent =>
 			LoginFormSchema.transform(async (data, ctx) => {

app/routes/c.$companyId+/_layout_company.tsx

@@ -11,8 +11,8 @@ const companyRoutes = [
 		end: true,
 	},
 	{
-		title: 'Accounts',
-		href: 'accounts',
+		title: 'Customers',
+		href: 'customers',
 	},
 	{
 		title: 'Sales',

app/routes/c.$companyId+/accounts.tsx → app/routes/c.$companyId+/customers.tsx

@@ -15,26 +15,26 @@ const salesRoutes = [
 		href: 'customers',
 	},
 	{
-		title: 'Quotes',
-		href: 'quotes',
+		title: 'New Account',
+		href: 'new',
 	},
 	{
 		title: 'Payments',
 		href: 'payments',
 	},
 ]
 
-export default function AccountsLayout() {
+export default function CustomerAccountsLayout() {
 	return (
 		<>
-			<h1 className="text-h3 md:text-h2">Accounts</h1>
+			<h1 className="text-h3 md:text-h2">Customer Accounts</h1>
 
-			<nav className="grid max-w-lg grid-flow-col gap-6 overflow-y-auto py-2 [scrollbar-width:none]">
+			<nav className="grid max-w-lg grid-flow-col gap-6 overflow-y-auto text-nowrap py-2 font-semibold [scrollbar-width:none]">
 				{salesRoutes.map(route => (
 					<NavLink
 						key={route.title}
 						className={({ isActive }) =>
-							`font-semibold hover:underline ${isActive ? 'underline' : 'text-foreground/50'}`
+							`hover:underline ${isActive ? 'underline' : 'text-foreground/50'}`
 						}
 						to={route.href}
 						end={route.end}

app/routes/c.$companyId+/purchases.tsx

@@ -29,12 +29,12 @@ export default function PurchasesLayout() {
 		<>
 			<h1 className="text-h3 md:text-h2">Purchases</h1>
 
-			<nav className="grid max-w-lg grid-flow-col gap-6 overflow-y-auto py-2 [scrollbar-width:none]">
+			<nav className="grid max-w-lg grid-flow-col gap-6 overflow-y-auto text-nowrap py-2 font-semibold  [scrollbar-width:none]">
 				{salesRoutes.map(route => (
 					<NavLink
 						key={route.title}
 						className={({ isActive }) =>
-							`font-semibold hover:underline ${isActive ? 'underline' : 'text-foreground/50'}`
+							`hover:underline ${isActive ? 'underline' : 'text-foreground/50'}`
 						}
 						to={route.href}
 						end={route.end}

app/routes/c.$companyId+/sales.tsx

@@ -29,12 +29,12 @@ export default function SalesLayout() {
 		<>
 			<h1 className="text-h3 md:text-h2">Sales</h1>
 
-			<nav className="grid max-w-lg grid-flow-col gap-6 overflow-y-auto py-2 [scrollbar-width:none]">
+			<nav className="grid max-w-lg grid-flow-col gap-6 overflow-y-auto text-nowrap py-2 font-semibold [scrollbar-width:none]">
 				{salesRoutes.map(route => (
 					<NavLink
 						key={route.title}
 						className={({ isActive }) =>
-							`font-semibold hover:underline ${isActive ? 'underline' : 'text-foreground/50'}`
+							`hover:underline ${isActive ? 'underline' : 'text-foreground/50'}`
 						}
 						to={route.href}
 						end={route.end}

app/routes/c.$companyId.customers+/$customerId_.edit.tsx

@@ -0,0 +1,58 @@
+import { invariantResponse } from '@epic-web/invariant'
+import { json, type LoaderFunctionArgs } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
+import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
+import { prisma } from '#app/utils/db.server.ts'
+import { requireCompanyUserWithRBAC } from '#app/utils/permissions.server.ts'
+import { CustomerAccountEditor, action } from './__customer-account-editor.tsx'
+
+export { action }
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
+	await requireCompanyUserWithRBAC({
+		request,
+		companyId: params.companyId!,
+		permission: 'create:company-account',
+	})
+
+	const customerAccount = await prisma.customerAccount.findFirst({
+		where: {
+			id: params.customerId!,
+			companyId: params.companyId,
+		},
+		select: {
+			id: true,
+			name: true,
+			uniqueId: true,
+			email: true,
+			phone: true,
+			address: true,
+			country: true,
+			city: true,
+			state: true,
+			zip: true,
+		},
+	})
+
+	invariantResponse(customerAccount, 'Not found', { status: 404 })
+
+	return json({ customerAccount: customerAccount })
+}
+
+export default function CompanyAccountsEdit() {
+	const data = useLoaderData<typeof loader>()
+
+	return <CustomerAccountEditor customerAccount={data.customerAccount} />
+}
+
+export function ErrorBoundary() {
+	return (
+		<GeneralErrorBoundary
+			statusHandlers={{
+				404: ({ params }) => (
+					<p>No account with the id "{params.customerId}" exists</p>
+				),
+			}}
+		/>
+	)
+}