base work

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

@@ -0,0 +1,63 @@
+import { NavLink, Outlet } from '@remix-run/react'
+
+const companyRoutes = [
+	{
+		title: 'Accounts',
+		href: 'accounts',
+	},
+	{
+		title: 'Sales',
+		href: 'sales',
+	},
+	{
+		title: 'Purchase',
+		href: 'purchase',
+	},
+	{
+		title: 'Reports',
+		href: 'reports',
+	},
+]
+
+export default function LayoutCompany() {
+	return (
+		<div className="flex h-full flex-col lg:flex-row">
+			<nav className="border-r bg-muted p-4 lg:w-2/12">
+				<h1 className="px-2 text-h3 text-primary">BookBreeze</h1>
+				<ul className="my-10 text-lg font-semibold">
+					<li>
+						<NavLink
+							className={({ isActive }) =>
+								`m-1 flex rounded-lg p-1 px-2 hover:bg-border ${isActive ? 'bg-border' : ''}`
+							}
+							to=""
+							end
+						>
+							Dashboard
+						</NavLink>
+					</li>
+
+					{companyRoutes.map(route => (
+						<li key={route.href}>
+							<NavLink
+								className={({ isActive }) =>
+									`m-1 flex rounded-lg p-1 px-2 hover:bg-border ${isActive ? 'bg-border' : ''}`
+								}
+								to={route.href}
+							>
+								{route.title}
+							</NavLink>
+						</li>
+					))}
+				</ul>
+			</nav>
+
+			<section className="p-4 lg:w-10/12">
+				<header className="bg-gray-200 p-4">
+					<h2 className="text-xl font-semibold">Header</h2>
+				</header>
+				<Outlet />
+			</section>
+		</div>
+	)
+}

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

@@ -0,0 +1,7 @@
+export default function CompanyIndex() {
+	return (
+		<div>
+			<h1>Company Route</h1>
+		</div>
+	)
+}

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

@@ -0,0 +1,44 @@
+import { Link, Outlet } from '@remix-run/react'
+
+const salesRoutes = [
+	{
+		title: 'Overview',
+		href: '',
+	},
+	{
+		title: 'Invoices',
+		href: 'invoices',
+	},
+	{
+		title: 'Customers',
+		href: 'customers',
+	},
+	{
+		title: 'Quotes',
+		href: 'quotes',
+	},
+	{
+		title: 'Payments',
+		href: 'payments',
+	},
+]
+
+export default function Sales() {
+	return (
+		<div>
+			<h1 className="text-h3 md:text-h2">Sales</h1>
+
+			<ul className="flex gap-4 text-lg">
+				{salesRoutes.map(route => (
+					<li key={route.href}>
+						<Link to={route.href}>{route.title}</Link>
+					</li>
+				))}
+			</ul>
+
+			<section>
+				<Outlet />
+			</section>
+		</div>
+	)
+}

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

@@ -0,0 +1,7 @@
+export default function CompanySalesOverview() {
+	return (
+		<div>
+			<h1>Overview Route</h1>
+		</div>
+	)
+}

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

@@ -0,0 +1,7 @@
+export default function InvoicesInvoiceId() {
+	return (
+		<div className="h-full">
+			<h1>Invoice Id Route</h1>
+		</div>
+	)
+}

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

@@ -0,0 +1,15 @@
+import { Link, Outlet } from '@remix-run/react'
+
+export default function Invoices() {
+	return (
+		<div className="flex">
+			<div className="w-1/2">
+				<h1>Sale Invoices Route</h1>
+				<Link to="123">Invoice 123</Link>
+			</div>
+			<div className="w-1/2">
+				<Outlet />
+			</div>
+		</div>
+	)
+}

app/routes/studio+/index.tsx

@@ -0,0 +1,7 @@
+export default function StudioIndex() {
+	return (
+		<div>
+			<h1>Unknown Route</h1>
+		</div>
+	)
+}

app/styles/tailwind.css

@@ -10,7 +10,7 @@
 		/* prefixed with foreground because it should look good on the background */
 		--foreground-destructive: 345 82.7% 40.8%;
 
-		--background: 0 0% 100%;
+		/* --background: 0 0% 100%;
 		--foreground: 222.2 84% 4.9%;
 
 		--muted: 210 40% 93%;
@@ -40,16 +40,58 @@
 
 		--ring: 215 20.2% 65.1%;
 
+		--radius: 0.5rem; */
+
+		--background: 0 0% 100%;
+		--foreground: 240 10% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 240 10% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
+		--primary: 142.1 76.2% 36.3%;
+		--primary-foreground: 355.7 100% 97.3%;
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+		--ring: 142.1 76.2% 36.3%;
 		--radius: 0.5rem;
 	}
 
 	.dark {
-		--background: 222.2 84% 4.9%;
-		--foreground: 210 40% 98%;
-
 		/* prefixed with foreground because it should look good on the background */
 		--foreground-destructive: -4 84% 60%;
 
+		--background: 20 14.3% 4.1%;
+		--foreground: 0 0% 95%;
+		--card: 24 9.8% 10%;
+		--card-foreground: 0 0% 95%;
+		--popover: 0 0% 9%;
+		--popover-foreground: 0 0% 95%;
+		--primary: 142.1 70.6% 45.3%;
+		--primary-foreground: 144.9 80.4% 10%;
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
+		--muted: 0 0% 15%;
+		--muted-foreground: 240 5% 64.9%;
+		--accent: 12 6.5% 15.1%;
+		--accent-foreground: 0 0% 98%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 85.7% 97.3%;
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+		--ring: 142.4 71.8% 29.2%;
+
+		/* --background: 222.2 84% 4.9%;
+		--foreground: 210 40% 98%;
+
+
 		--muted: 217.2 32.6% 12%;
 		--muted-foreground: 215 20.2% 65.1%;
 
@@ -75,6 +117,6 @@
 		--destructive: 0 60% 40%;
 		--destructive-foreground: 0 85.7% 97.3%;
 
-		--ring: 217.2 32.6% 60%;
+		--ring: 217.2 32.6% 60%; */
 	}
 }