Skip to content

Commit

Permalink
basic frontend foundation done
Browse files Browse the repository at this point in the history
  • Loading branch information
itsmegood committed Feb 6, 2024
1 parent c87ec99 commit 830cb3a
Show file tree
Hide file tree
Showing 20 changed files with 450 additions and 123 deletions.
31 changes: 18 additions & 13 deletions app/components/layout/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
} from '../ui/dropdown-menu.tsx'
import { Icon } from '../ui/icon.tsx'
import { MobileNav } from './mobile-nav.tsx'
import { ThemeSwitch } from '../theme-switcher.tsx'

export function HeaderNav({
sticky,
Expand Down Expand Up @@ -60,7 +61,7 @@ export function HeaderNav({
// : 'shadow-sm'
// }
>
<nav className="container flex justify-between p-6">
<nav className="container flex items-center justify-between p-6">
<div className="flex items-center justify-between gap-2 md:w-1/4">
{mobileNavItems && <MobileNav menuItems={mobileNavItems} />}

Expand Down Expand Up @@ -119,18 +120,22 @@ export function HeaderNav({
</>
)}

{user ? (
<UserDropdown />
) : (
<Button
asChild
variant="default"
size="sm"
className="whitespace-nowrap"
>
<Link to="/login">Log In</Link>
</Button>
)}
<div className="flex items-center gap-4">
<ThemeSwitch />

{user ? (
<UserDropdown />
) : (
<Button
asChild
variant="default"
size="sm"
className="whitespace-nowrap"
>
<Link to="/login">Log In</Link>
</Button>
)}
</div>
{/* <div className="block w-full sm:hidden">{searchBar}</div> */}
</nav>
</header>
Expand Down
12 changes: 7 additions & 5 deletions app/components/layout/mobile-nav.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Link, NavLink } from '@remix-run/react'
import { Icon } from '../ui/icon.tsx'
import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet.tsx'
import { Sheet, SheetClose, SheetContent, SheetTrigger } from '../ui/sheet.tsx'

export function MobileNav({
menuItems,
Expand All @@ -10,6 +10,7 @@ export function MobileNav({
items: {
title: string
href: string
end?: boolean
}[]
}[]
}) {
Expand All @@ -36,18 +37,19 @@ export function MobileNav({
{item.title}
</div>
)}

<ul className="flex flex-col gap-1">
{item.items.map(subItem => (
<li key={subItem.title}>
<NavLink
to={subItem.href}
className={({ isActive }) =>
`flex rounded-lg p-1 px-2 hover:bg-border ${isActive ? 'bg-border' : ''}`
`flex rounded-lg hover:bg-border ${isActive ? 'bg-border' : ''}`
}
end
end={subItem.end}
>
{subItem.title}
<SheetClose className="flex w-full p-1 px-2">
{subItem.title}
</SheetClose>
</NavLink>
</li>
))}
Expand Down
4 changes: 2 additions & 2 deletions app/components/theme-switcher.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import {
useRootLoaderData,
} from '#app/root'
import { type Theme } from '#app/utils/theme.server'
import { Icon } from './ui/icon'
import { Button } from './ui/button'
import { Icon } from './ui/icon'

// export function ThemeSwitch({
// userPreference,
Expand Down Expand Up @@ -54,7 +54,7 @@ export function ThemeSwitch() {
<div className="flex gap-2">
<Button
variant="outline_2"
type="submit"
// type="submit"
size="icon"
className="rounded-full"
>
Expand Down
2 changes: 1 addition & 1 deletion app/components/ui/sheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const SheetOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
className,
)}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion app/root.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ function App() {

return (
<Document nonce={nonce} theme={theme} env={data.ENV}>
<div className="flex h-screen flex-col justify-between">
<div className="flex h-[100dvh] flex-col justify-between">
<Outlet />

{/* <div>
Expand Down
67 changes: 16 additions & 51 deletions app/routes/c.$companyId+/_layout_company.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,13 @@ import { UserDropdown } from '#app/components/layout/header'
import { MobileNav } from '#app/components/layout/mobile-nav'
import { SearchBar } from '#app/components/search-bar'
import { ThemeSwitch } from '#app/components/theme-switcher'
import { Button } from '#app/components/ui/button'
import { Icon } from '#app/components/ui/icon'

const companyRoutes = [
{
title: 'Dashboard',
href: '',
end: true,
},
{
title: 'Accounts',
href: 'accounts',
Expand All @@ -16,8 +19,8 @@ const companyRoutes = [
href: 'sales',
},
{
title: 'Purchase',
href: 'purchase',
title: 'Purchases',
href: 'purchases',
},
{
title: 'Reports',
Expand All @@ -28,73 +31,35 @@ const companyRoutes = [
const mobileCompanyRoutes = [
{
title: 'General',
items: [
{
title: 'Dashboard',
href: '',
},
{
title: 'Accounts',
href: 'accounts',
},
{
title: 'Sales',
href: 'sales',
},
{
title: 'Purchase',
href: 'purchase',
},
{
title: 'Reports',
href: 'reports',
},
],
items: companyRoutes,
},
]

export default function LayoutCompany() {
return (
<div className="relative flex flex-col lg:flex-row">
<nav className="top-0 border-r bg-muted/50 p-4 lg:sticky lg:h-screen lg:w-2/12">
<div className="flex items-center justify-between">
<div className="flex">
<div className="flex items-center justify-between py-2">
<div className="flex items-center">
<MobileNav menuItems={mobileCompanyRoutes} />

<Link to="/" className="px-2 text-h4 font-semibold text-primary">
䷸ Book<span className="text-cyan-400">Breeze</span>
</Link>
</div>
{/* <Link to="search" className="lg:hidden">
<Button size="sm">
<Icon name="magnifying-glass" size="sm" />
<span className="sr-only">Search</span>
</Button>
</Link> */}
<span className="lg:hidden">
<UserDropdown />
</span>
</div>
<ul className="my-10 hidden text-lg font-semibold lg:block">
<li>
<NavLink
className={({ isActive }) =>
`m-1 flex rounded-lg p-1 px-2 hover:bg-border ${isActive ? 'bg-border' : ''}`
}
to=""
end
>
Dashboard
</NavLink>
</li>

<ul className="mt-10 hidden text-lg font-semibold lg:block">
{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}
end={route.end}
>
{route.title}
</NavLink>
Expand All @@ -103,8 +68,8 @@ export default function LayoutCompany() {
</ul>
</nav>

<section className="flex flex-col gap-4 p-4 lg:w-10/12">
<header className="hidden w-full justify-between gap-4 lg:flex">
<div className="flex flex-col gap-2 p-6 md:gap-4 lg:w-10/12">
<nav className="hidden w-full justify-between gap-4 lg:flex">
{/* {!isProjectPage && ( */}
<SearchBar
action="/search"
Expand All @@ -117,10 +82,10 @@ export default function LayoutCompany() {
<ThemeSwitch />
<UserDropdown />
</div>
</header>
</nav>

<Outlet />
</section>
</div>
</div>
)
}
54 changes: 54 additions & 0 deletions app/routes/c.$companyId+/accounts.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { NavLink, Outlet } from '@remix-run/react'

const salesRoutes = [
{
title: 'Overview',
href: '',
end: true,
},
{
title: 'Invoices',
href: 'invoices',
},
{
title: 'Customers',
href: 'customers',
},
{
title: 'Quotes',
href: 'quotes',
},
{
title: 'Payments',
href: 'payments',
},
]

export default function AccountsLayout() {
return (
<>
<h1 className="text-h3 md:text-h2">Accounts</h1>

<nav className="grid max-w-lg grid-flow-col gap-6 overflow-y-auto py-2 [scrollbar-width:none]">
{salesRoutes.map(route => (
<NavLink
key={route.title}
className={({ isActive }) =>
`font-semibold hover:underline ${isActive ? 'underline' : 'text-foreground/50'}`
}
to={route.href}
end={route.end}
>
{route.title}
</NavLink>
))}
</nav>

<hr />

<section className="space-y-6">
<Outlet />
</section>
</>
)
}
39 changes: 37 additions & 2 deletions app/routes/c.$companyId+/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,42 @@
import { invariantResponse } from '@epic-web/invariant'
import { type LoaderFunctionArgs, json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { requireUserId } from '#app/utils/auth.server'
import { PLATFORM_STATUS } from '#app/utils/constants/platform-status'
import { prisma } from '#app/utils/db.server'

export async function loader({ request, params }: LoaderFunctionArgs) {
const userId = await requireUserId(request)

const company = await prisma.company.findUnique({
where: {
id: params.companyId,
users: {
some: {
userId: userId,
},
},
platformStatusKey: PLATFORM_STATUS.ACTIVE.KEY,
},
select: {
name: true,
},
})

invariantResponse(company, 'Not found', { status: 404 })

return json({ company })
}

export default function CompanyIndex() {
const data = useLoaderData<typeof loader>()

// Get company daily/monthly metrics
// Get company basic stats

return (
<div className="bg-red-400">
<h1>Company Route</h1>
<div>
<h1 className="text-h3 md:text-h2">{data.company.name}</h1>
</div>
)
}
Loading

0 comments on commit 830cb3a

Please sign in to comment.