Skip to content

Commit

Permalink
improving new invoice and search
Browse files Browse the repository at this point in the history
  • Loading branch information
itsmegood committed Feb 20, 2024
1 parent 1a3f080 commit 151cbd6
Show file tree
Hide file tree
Showing 13 changed files with 421 additions and 300 deletions.
4 changes: 2 additions & 2 deletions app/components/search-bar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,11 @@ export function SearchBar({
<Form
method="GET"
action={action}
className={cn('w-full', className)}
className={cn('w-full sm:min-w-[368px]', className)}
onChange={e => autoSubmit && handleFormChange(e.currentTarget)}
onSubmit={onSubmitHandler}
>
<div key={defaultValue}>
<div key={defaultValue} className="w-full">
<Label htmlFor={id} className="sr-only">
Search
</Label>
Expand Down
2 changes: 1 addition & 1 deletion app/routes/c.$companyId+/accounts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const salesRoutes = [
},
{
title: 'Customers',
href: 'customers',
href: 'cust',
},
{
title: 'New Account',
Expand Down
2 changes: 1 addition & 1 deletion app/routes/c.$companyId+/sales.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const salesRoutes = [
},
{
title: 'New Sale',
href: '../search',
href: 'new-invoice',
},
]

Expand Down
105 changes: 59 additions & 46 deletions app/routes/c.$companyId+/search.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { type LoaderFunctionArgs, json } from '@remix-run/node'
import { Link, useLoaderData } from '@remix-run/react'
import { Link, useLoaderData, useParams } from '@remix-run/react'
import { SearchBar } from '#app/components/search-bar'
import { Button } from '#app/components/ui/button'
import {
Expand All @@ -9,6 +9,12 @@ import {
DropdownMenuTrigger,
} from '#app/components/ui/dropdown-menu'
import { Icon, type IconName } from '#app/components/ui/icon'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '#app/components/ui/tooltip'
import { prisma } from '#app/utils/db.server'
import { requireCompanyUserWithRBAC } from '#app/utils/permissions.server'

Expand Down Expand Up @@ -51,10 +57,22 @@ let purchaseBills: {
}[] = []

const searchKeywords = {
Account: 'acc',
Account_UID: 'uid',
Invoice: 'inv',
Bill: 'bill',
Account: {
key: 'acc',
info: 'Search for accounts using names',
},
Account_UID: {
key: 'uid',
info: 'Search for accounts by unique ID',
},
Invoice: {
key: 'inv',
info: 'Search for invoices using invoice number',
},
Bill: {
key: 'bill',
info: 'Search for bills via bill number',
},
}

export async function loader({ request, params }: LoaderFunctionArgs) {
Expand All @@ -73,7 +91,8 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
})

const url = new URL(request.url)
const searchTerm = String(url.searchParams.get('search'))
// ? q stands for query
const searchTerm = String(url.searchParams.get('q'))

if (!searchTerm || searchTerm.trim().length < 3 || searchTerm.length > 20)
return null
Expand Down Expand Up @@ -215,7 +234,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
const like = `%${field.trim()}%`

switch (keyword.toLowerCase()) {
case searchKeywords.Account:
case searchKeywords.Account.key:
accounts = await prisma.account.findMany({
where: {
// companyId: user.userCompanies[0].companyId
Expand All @@ -232,7 +251,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
})
break

case searchKeywords.Account_UID:
case searchKeywords.Account_UID.key:
accounts = await prisma.account.findMany({
where: {
// companyId: user.userCompanies[0].companyId
Expand All @@ -249,7 +268,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
})
break

case searchKeywords.Invoice:
case searchKeywords.Invoice.key:
saleInvoices = await prisma.saleInvoice.findMany({
where: {
// companyId: user.userCompanies[0].companyId
Expand Down Expand Up @@ -280,7 +299,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
})
break

case searchKeywords.Bill:
case searchKeywords.Bill.key:
purchaseBills = await prisma.purchaseBill.findMany({
where: {
// companyId: user.userCompanies[0].companyId
Expand Down Expand Up @@ -319,20 +338,38 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
export default function CompanySearch() {
const data = useLoaderData<typeof loader>()

const params = useParams()

return (
<>
<h2 className="text-h3 md:text-h2">Discover</h2>

<div className="space-y-2">
<SearchBar status="idle" action="" autoSubmit autoFocusSearch />

<div className="flex items-center space-x-4">
<Link to="hello" className="text-primary">
Advanced Search
</Link>
<Link to="hello" className="text-primary">
Filter
</Link>
<div>
<SearchBar
status="idle"
action=""
autoSubmit
autoFocusSearch
searchParam="q"
/>

<div className="mt-1 flex flex-col gap-2 text-sm font-light text-foreground/45 md:flex-row md:items-center">
Search faster using keywords
<div className="flex gap-2 overflow-x-auto">
<TooltipProvider>
{Object.entries(searchKeywords).map(([_, value]) => (
<Tooltip key={value.key}>
<TooltipTrigger
tabIndex={-1}
className="rounded-lg bg-muted p-1"
>
<Icon name="question-mark-circled">{value.key}:</Icon>
</TooltipTrigger>
<TooltipContent side="bottom">{value.info}</TooltipContent>
</Tooltip>
))}
</TooltipProvider>
</div>
</div>
</div>

Expand All @@ -356,38 +393,14 @@ export default function CompanySearch() {
items={[
{
label: 'New Sale',
href: `../sales/new/${account.id}`,
href: `/c/${params.companyId}/sales/new-invoice?accountId=${account.id}`,
icon: 'file-text',
},
{ label: 'Edit', href: 'hello', icon: 'pencil-1' },
{ label: 'View', href: 'hello', icon: 'avatar' },
]}
/>
</li>
))}
{data.accounts.map(account => (
<li
key={account.id}
className="flex items-center justify-between rounded-lg border p-2"
onClick={() => {}}
>
<div>
{account.name} - {account.uniqueId}
</div>
{/* <SimpleDropDown items={accountDropdownItems} /> */}
</li>
))}
{data.accounts.map(account => (
<li
key={account.id}
className="flex items-center justify-between rounded-lg border p-2"
onClick={() => {}}
>
<div>
{account.name} - {account.uniqueId}
</div>
{/* <SimpleDropDown items={accountDropdownItems} /> */}
</li>
))}
</ul>
</>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
return json({ account })
}

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

return (
Expand Down
83 changes: 83 additions & 0 deletions app/routes/c.$companyId.accounts+/cust.index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import { invariantResponse } from '@epic-web/invariant'
import { type LoaderFunctionArgs, json } from '@remix-run/node'
import { Link, useLoaderData } from '@remix-run/react'
import { Button } from '#app/components/ui/button'
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: {
accounts: {
select: {
id: true,
name: true,
uniqueId: true,
},
},
},
})

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

return json({ company })
}

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

return (
<>
<table className="min-w-full divide-y">
<thead>
<tr className="text-left text-sm font-semibold">
<th scope="col" className="py-3.5 pr-3">
Name
</th>
<th scope="col" className="hidden px-3 py-3.5 lg:table-cell">
Unique Id
</th>
<th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-0">
<span className="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody className="divide-y">
{data.company.accounts.map(customer => (
<tr key={customer.id}>
<td className="w-full max-w-0 py-4 pr-3 font-medium sm:w-auto sm:max-w-none">
{customer.name}
<dl className="font-normal lg:hidden">
<dt className="sr-only sm:hidden">Unique Id</dt>
<dd className="mt-1 truncate text-sm sm:hidden">
{customer.uniqueId ?? '-'}
</dd>
</dl>
</td>
<td className="hidden px-3 py-4 sm:table-cell">
{customer.uniqueId ?? '-'}
</td>
<td className="py-4 pl-3 pr-4 text-right font-medium sm:pr-0">
<Link to={`${customer.id}`}>
<Button variant="link">View</Button>
</Link>
</td>
</tr>
))}
</tbody>
</table>
</>
)
}
2 changes: 1 addition & 1 deletion app/routes/c.$companyId.accounts+/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export default function CompanyCustomerAccountsOverview() {
{customer.uniqueId ?? '-'}
</td>
<td className="py-4 pl-3 pr-4 text-right font-medium sm:pr-0">
<Link to={`${customer.id}`}>
<Link to={`cust/${customer.id}`}>
<Button variant="link">View</Button>
</Link>
</td>
Expand Down
73 changes: 73 additions & 0 deletions app/routes/c.$companyId.sales+/new-invoice.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { type LoaderFunctionArgs } from '@remix-run/node'
import { json, redirect, useLoaderData } from '@remix-run/react'
import { prisma } from '#app/utils/db.server'
import { requireCompanyUserWithRBAC } from '#app/utils/permissions.server'

export async function loader({ request, params }: LoaderFunctionArgs) {
await requireCompanyUserWithRBAC({
request,
companyId: params.companyId!,
permission: 'create:company-account',
})

const url = new URL(request.url)
const searchParams = url.searchParams

// ! Removing guest mode for now I can just make a misc account for all guest stuff
// const checkGuest = searchParams.get('guest')
// if (checkGuest) return null

const accountId = searchParams.get('accountId')

if (!accountId || accountId.length >= 25 || accountId.length <= 36)
return redirect(`/c/${params.companyId}/search?q=acc:`)

const account = await prisma.account.findFirst({
where: {
id: params.accountId,
companyId: params.companyId,
},
select: {
id: true,
name: true,
balance: true,
uniqueId: true,
// phone: true,
},
})
return json({ account })
}

export default function CompanySaleNew() {
// const data = useLoaderData()

return <div>Hello</div>
}

// ! Remove the guest stuff completely
// export default function CompanySaleNew() {
// const data = useLoaderData<typeof loader>()

// const params = useParams()

// // create a modal to select whether to enter guest mode or search account using tailwindcss and react
// return (
// <div className="flex h-screen flex-col items-center justify-center space-y-4">
// <Link
// to="?guest=true"
// className="rounded bg-blue-500 px-6 py-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-opacity-50"
// autoFocus
// onClick={() => console.log('Entering Guest Mode')}
// >
// Guest Mode
// </Link>
// <Link to={`/c/${params.companyId}/search`}
// className="rounded bg-green-500 px-6 py-2 text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-700 focus:ring-opacity-50"
// onClick={() => console.log('Searching Account')}
// >
// Search Account
// </Link>
// </div>

// )
// }
Loading

0 comments on commit 151cbd6

Please sign in to comment.