= (args) => (
24 | <>
25 |
26 |
27 |
28 | );
29 |
30 | export const Default = Template.bind({});
31 | Default.args = {
32 | color: 'secondary',
33 | message: 'Toast message',
34 | };
35 |
--------------------------------------------------------------------------------
/app/src/components/Toast.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | faCircleInfo,
3 | faTriangleExclamation,
4 | faXmark,
5 | } from '@fortawesome/free-solid-svg-icons';
6 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
7 | import cn from 'classnames';
8 | import React from 'react';
9 | import baseToast from 'react-hot-toast';
10 |
11 | export type ToastArgs = {
12 | color?: 'primary' | 'secondary' | 'danger';
13 | message: string;
14 | };
15 |
16 | const toast = ({ color = 'primary', message }: ToastArgs) => {
17 | baseToast(
18 | (t) => (
19 |
20 |
21 |
28 | {message}
29 |
30 |
31 |
34 |
35 |
(
7 | Component: React.ComponentType
8 | ) => {
9 | function RequireAuthentication(props: P) {
10 | const router = useRouter();
11 | const { status } = useSession();
12 |
13 | useEffect(() => {
14 | if (status === 'unauthenticated') {
15 | void router.push(Routes.signIn);
16 | }
17 | }, [router, status]);
18 |
19 | return status === 'authenticated' ? : null;
20 | }
21 |
22 | return RequireAuthentication;
23 | };
24 |
25 | export default WithAuthentication;
26 |
--------------------------------------------------------------------------------
/app/src/components/WithNoAuthentication.test.tsx:
--------------------------------------------------------------------------------
1 | import 'next';
2 | import { setupServer } from 'msw/node';
3 | import { render, screen, mockRouter, mockSession, waitFor } from '@lib/testing';
4 | import WithNoAuthentication from './WithNoAuthentication';
5 |
6 | const server = setupServer();
7 |
8 | beforeAll(() => server.listen());
9 | afterEach(() => server.resetHandlers());
10 | afterAll(() => server.close());
11 |
12 | const PageWithNoAuthentication = WithNoAuthentication(() => (
13 | This page requires an unauthenticated user
14 | ));
15 |
16 | describe('WithAuthentication', () => {
17 | beforeEach(() => {
18 | jest.resetAllMocks();
19 | });
20 |
21 | it('renders the page when the user is not authenticated', async () => {
22 | const session = undefined;
23 | server.resetHandlers(mockSession(session));
24 | render(, { session });
25 |
26 | await screen.findByText('This page requires an unauthenticated user');
27 | });
28 |
29 | it('redirects to the home page when the user is authenticated', async () => {
30 | const session = {
31 | user: {},
32 | userId: 'user_1',
33 | companyId: 'company_1',
34 | expires: '',
35 | };
36 | server.resetHandlers(mockSession(session));
37 | render(, { session });
38 |
39 | await waitFor(() => {
40 | expect(mockRouter.push).toHaveBeenCalledWith('/');
41 | });
42 | });
43 | });
44 |
--------------------------------------------------------------------------------
/app/src/components/WithNoAuthentication.tsx:
--------------------------------------------------------------------------------
1 | import { useSession } from 'next-auth/react';
2 | import { useRouter } from 'next/router';
3 | import { useEffect } from 'react';
4 | import Routes from '@lib/routes';
5 |
6 | const WithNoAuthentication =
(
7 | Component: React.ComponentType
8 | ) => {
9 | function RequireNoAuthentication(props: P) {
10 | const router = useRouter();
11 | const { status } = useSession();
12 |
13 | useEffect(() => {
14 | if (status === 'authenticated') {
15 | void router.push(Routes.home);
16 | }
17 | }, [router, status]);
18 |
19 | return status === 'unauthenticated' ? : null;
20 | }
21 |
22 | return RequireNoAuthentication;
23 | };
24 |
25 | export default WithNoAuthentication;
26 |
--------------------------------------------------------------------------------
/app/src/lib/api.ts:
--------------------------------------------------------------------------------
1 | import { createTRPCProxyClient, httpBatchLink, httpLink } from '@trpc/client';
2 | import type { AppRouter } from '@server/router';
3 |
4 | export const getBaseUrl = (): string => {
5 | if (process.env.NEXT_PUBLIC_BASE_URL) {
6 | return process.env.NEXT_PUBLIC_BASE_URL;
7 | }
8 | if (process.env.NEXT_PUBLIC_VERCEL_URL) {
9 | return `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`;
10 | }
11 | if (process.env.RENDER_INTERNAL_HOSTNAME) {
12 | return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;
13 | }
14 |
15 | return `http://localhost:${process.env.PORT ?? 3000}`;
16 | };
17 |
18 | const baseUrl = getBaseUrl();
19 |
20 | const client = createTRPCProxyClient({
21 | links: [
22 | process.env.TEST_ENVIRONMENT === 'true'
23 | ? httpLink({
24 | url: `${baseUrl}/api/trpc`,
25 | })
26 | : httpBatchLink({
27 | url: `${baseUrl}/api/trpc`,
28 | maxURLLength: 2083,
29 | }),
30 | ],
31 | });
32 |
33 | export default client;
34 |
--------------------------------------------------------------------------------
/app/src/lib/appName.ts:
--------------------------------------------------------------------------------
1 | const AppName = 'Beet Bill';
2 | export default AppName;
3 |
--------------------------------------------------------------------------------
/app/src/lib/capitalizeFirstLetter.ts:
--------------------------------------------------------------------------------
1 | const capitalizeFirstLetter = (string: string) =>
2 | `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
3 |
4 | export default capitalizeFirstLetter;
5 |
--------------------------------------------------------------------------------
/app/src/lib/clients/queryKeys.ts:
--------------------------------------------------------------------------------
1 | const QueryKeys = {
2 | clients: ['clients'],
3 | client: (id: string) => ['clients', id],
4 | };
5 |
6 | export default QueryKeys;
7 |
--------------------------------------------------------------------------------
/app/src/lib/clients/useClient.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from '@tanstack/react-query';
2 | import api from '@lib/api';
3 | import QueryKeys from './queryKeys';
4 |
5 | const useClient = (id: string) =>
6 | useQuery(QueryKeys.client(id), () => api.getClient.query({ id }));
7 |
8 | export default useClient;
9 |
--------------------------------------------------------------------------------
/app/src/lib/clients/useClients.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from '@tanstack/react-query';
2 | import api from '@lib/api';
3 | import QueryKeys from './queryKeys';
4 |
5 | const useClients = () =>
6 | useQuery(QueryKeys.clients, () => api.getClients.query());
7 |
8 | export default useClients;
9 |
--------------------------------------------------------------------------------
/app/src/lib/clients/useCreateClient.ts:
--------------------------------------------------------------------------------
1 | import cuid from 'cuid';
2 | import api from '@lib/api';
3 | import useMutation from '@lib/useMutation';
4 | import type {
5 | CreateClientInput,
6 | Client,
7 | GetClientsOutput,
8 | } from '@server/clients/types';
9 | import QueryKeys from './queryKeys';
10 |
11 | type UseCreateClientArgs =
12 | | {
13 | onSuccess?: (client: Client) => void;
14 | }
15 | | undefined;
16 |
17 | const useCreateClient = ({ onSuccess }: UseCreateClientArgs = {}) =>
18 | useMutation({
19 | mutationFn: api.createClient.mutate,
20 | cacheKey: QueryKeys.clients,
21 | cacheUpdater: (clients, input) => {
22 | const now = new Date().toISOString();
23 | clients.push({
24 | id: `new-client${cuid()}`,
25 | companyId: '',
26 | number: null,
27 | createdAt: now,
28 | updatedAt: now,
29 | vatNumber: null,
30 | contactName: null,
31 | email: null,
32 | country: null,
33 | address: null,
34 | postCode: null,
35 | city: null,
36 | paymentTerms: 7,
37 | ...input,
38 | });
39 | },
40 | successMessage: () => 'Successfully created client!',
41 | errorMessage: () => 'Failed to create client',
42 | onSuccess,
43 | });
44 |
45 | export default useCreateClient;
46 |
--------------------------------------------------------------------------------
/app/src/lib/clients/useDeleteClient.ts:
--------------------------------------------------------------------------------
1 | import api from '@lib/api';
2 | import useMutation from '@lib/useMutation';
3 | import type {
4 | DeleteClientInput,
5 | GetClientsOutput,
6 | } from '@server/clients/types';
7 | import QueryKeys from './queryKeys';
8 |
9 | const useDeleteClient = () =>
10 | useMutation({
11 | mutationFn: api.deleteClient.mutate,
12 | cacheKey: QueryKeys.clients,
13 | cacheUpdater: (clients, input) => {
14 | const clientIndex = clients.findIndex(({ id }) => id === input.id);
15 | if (clientIndex !== -1) {
16 | clients.splice(clientIndex, 1);
17 | }
18 | },
19 | successMessage: () => 'Successfully deleted client!',
20 | errorMessage: () => 'Failed to delete client',
21 | });
22 |
23 | export default useDeleteClient;
24 |
--------------------------------------------------------------------------------
/app/src/lib/clients/useUpdateClient.ts:
--------------------------------------------------------------------------------
1 | import api from '@lib/api';
2 | import useMutation from '@lib/useMutation';
3 | import type {
4 | UpdateClientInput,
5 | GetClientsOutput,
6 | Client,
7 | } from '@server/clients/types';
8 | import QueryKeys from './queryKeys';
9 |
10 | type UseUpdateClientArgs =
11 | | {
12 | onSuccess?: (client: Client) => void;
13 | }
14 | | undefined;
15 |
16 | const useUpdateClient = ({ onSuccess }: UseUpdateClientArgs = {}) =>
17 | useMutation({
18 | mutationFn: api.updateClient.mutate,
19 | cacheKey: QueryKeys.clients,
20 | cacheUpdater: (clients, input) => {
21 | const clientIndex = clients.findIndex(({ id }) => id === input.id);
22 | if (clientIndex !== -1) {
23 | clients[clientIndex] = {
24 | ...clients[clientIndex],
25 | ...input,
26 | };
27 | }
28 | },
29 | successMessage: () => 'Successfully updated client!',
30 | errorMessage: () => 'Failed to update client',
31 | onSuccess,
32 | });
33 |
34 | export default useUpdateClient;
35 |
--------------------------------------------------------------------------------
/app/src/lib/companies/queryKeys.ts:
--------------------------------------------------------------------------------
1 | const QueryKeys = {
2 | company: ['company'],
3 | };
4 |
5 | export default QueryKeys;
6 |
--------------------------------------------------------------------------------
/app/src/lib/companies/useCompany.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from '@tanstack/react-query';
2 | import api from '@lib/api';
3 | import QueryKeys from './queryKeys';
4 |
5 | const useCompany = () => {
6 | const { data, ...rest } = useQuery(QueryKeys.company, () =>
7 | api.getCompany.query()
8 | );
9 | return {
10 | data,
11 | isValid: !!data && data.name && data.number,
12 | ...rest,
13 | };
14 | };
15 |
16 | export default useCompany;
17 |
--------------------------------------------------------------------------------
/app/src/lib/companies/useUpdateCompany.ts:
--------------------------------------------------------------------------------
1 | import api from '@lib/api';
2 | import useMutation from '@lib/useMutation';
3 | import type {
4 | UpdateCompanyInput,
5 | GetCompanyOutput,
6 | } from '@server/company/types';
7 | import QueryKeys from './queryKeys';
8 |
9 | const useUpdateCompany = () =>
10 | useMutation({
11 | mutationFn: api.updateCompany.mutate,
12 | cacheKey: QueryKeys.company,
13 | cacheUpdater: (company, input) => {
14 | if (company) {
15 | Object.assign(company, input);
16 | }
17 | },
18 | successMessage: () => 'Successfully updated company!',
19 | errorMessage: () => 'Failed to update company',
20 | });
21 |
22 | export default useUpdateCompany;
23 |
--------------------------------------------------------------------------------
/app/src/lib/emailRegexp.ts:
--------------------------------------------------------------------------------
1 | const EmailRegexp =
2 | /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
3 |
4 | export default EmailRegexp;
5 |
--------------------------------------------------------------------------------
/app/src/lib/format.ts:
--------------------------------------------------------------------------------
1 | import format from 'date-fns/format';
2 |
3 | export const formatDate = (date: Date | string) =>
4 | format(new Date(date), 'dd MMMM yyyy');
5 |
6 | export const safeFormatDate = (date: Date | string) => {
7 | try {
8 | return formatDate(date);
9 | } catch (e) {}
10 | };
11 |
12 | export const datePickerFormat = (date: Date) => format(date, 'yyyy-MM-dd');
13 |
14 | export const formatNumber = (value: number) => DecimalFormatter.format(value);
15 |
16 | export const formatPercentage = (value: number) =>
17 | PercentFormatter.format(value);
18 |
19 | export const formatAmount = (amount: number, currency: string | undefined) =>
20 | isNaN(amount)
21 | ? '-'
22 | : new Intl.NumberFormat('en-UK', {
23 | style: 'currency',
24 | currency: currency || 'EUR',
25 | }).format(amount);
26 |
27 | const DecimalFormatter = new Intl.NumberFormat('en-UK', { style: 'decimal' });
28 | const PercentFormatter = new Intl.NumberFormat('en-UK', { style: 'percent' });
29 |
--------------------------------------------------------------------------------
/app/src/lib/invoices/calculateTotal.ts:
--------------------------------------------------------------------------------
1 | import type { Product } from '@server/products/types';
2 |
3 | interface LineItem {
4 | product: Product;
5 | date: string;
6 | quantity: number;
7 | }
8 |
9 | const calculateTotal = (items: LineItem[]) => {
10 | if (items.length === 0) {
11 | return {
12 | exclVat: 0,
13 | total: 0,
14 | currency: '',
15 | };
16 | }
17 | const currency = items[0].product.currency;
18 | const [exclVat, total] = items.reduce(
19 | ([exclVatAcc, totalAcc], { product, quantity }) => {
20 | const basePrice = product.price * quantity;
21 | const priceExclVat = product.includesVat
22 | ? basePrice / (1 + product.vat / 100.0)
23 | : basePrice;
24 | const priceWithVat = priceExclVat * (1 + product.vat / 100.0);
25 | return [exclVatAcc + priceExclVat, totalAcc + priceWithVat];
26 | },
27 | [0, 0] as [number, number]
28 | );
29 | return {
30 | exclVat,
31 | total,
32 | currency,
33 | };
34 | };
35 |
36 | export default calculateTotal;
37 |
--------------------------------------------------------------------------------
/app/src/lib/invoices/downloadInvoice.tsx:
--------------------------------------------------------------------------------
1 | import saveAs from 'file-saver';
2 | import { pdf } from '@react-pdf/renderer';
3 | import InvoicePDF from '@components/InvoicePDF';
4 | import type { Invoice } from '@server/invoices/types';
5 |
6 | const downloadInvoice = async (invoice: Invoice) => {
7 | const title = `invoice ${invoice.company.name} ${[
8 | invoice.prefix,
9 | invoice.number,
10 | ]
11 | .filter((part) => !!part)
12 | .join(' ')}`.replace(' ', '_');
13 | const doc = ;
14 | const asPdf = pdf();
15 | asPdf.updateContainer(doc);
16 | const blob = await asPdf.toBlob();
17 | saveAs(blob, title);
18 | };
19 |
20 | export default downloadInvoice;
21 |
--------------------------------------------------------------------------------
/app/src/lib/invoices/getTitle.ts:
--------------------------------------------------------------------------------
1 | import type { Invoice } from '@server/invoices/types';
2 |
3 | const getTitle = (invoice: Invoice) => {
4 | if (invoice.number && invoice.prefix) {
5 | return `${invoice.prefix} - ${invoice.number}`;
6 | } else if (invoice.number) {
7 | return invoice.number.toString();
8 | } else if (invoice.prefix) {
9 | return `${invoice.prefix} -`;
10 | }
11 | return '';
12 | };
13 |
14 | export default getTitle;
15 |
--------------------------------------------------------------------------------
/app/src/lib/invoices/queryKeys.ts:
--------------------------------------------------------------------------------
1 | const QueryKeys = {
2 | invoices: ['invoices'],
3 | invoice: (id: string) => ['invoices', id],
4 | };
5 |
6 | export default QueryKeys;
7 |
--------------------------------------------------------------------------------
/app/src/lib/invoices/useCreateInvoice.ts:
--------------------------------------------------------------------------------
1 | import cuid from 'cuid';
2 | import api from '@lib/api';
3 | import useMutation from '@lib/useMutation';
4 | import type {
5 | Invoice,
6 | CreateInvoiceInput,
7 | GetInvoicesOutput,
8 | } from '@server/invoices/types';
9 | import type { Company } from '@server/company/types';
10 | import type { Client } from '@server/clients/types';
11 | import QueryKeys from './queryKeys';
12 |
13 | type UseCreateInvoicesArgs =
14 | | {
15 | onSuccess?: (invoice: Invoice) => void;
16 | }
17 | | undefined;
18 |
19 | type UseCreateInvoicesInput = CreateInvoiceInput & {
20 | company: Company;
21 | client: Client;
22 | };
23 |
24 | const useCreateInvoice = ({ onSuccess }: UseCreateInvoicesArgs = {}) =>
25 | useMutation({
26 | mutationFn: ({ company: _company, client: _client, ...input }) =>
27 | api.createInvoice.mutate(input),
28 | cacheKey: QueryKeys.invoices,
29 | cacheUpdater: (invoices, input) => {
30 | const now = new Date().toISOString();
31 | invoices.push({
32 | id: `new-invoice${cuid()}`,
33 | status: 'DRAFT',
34 | prefix: '',
35 | message: '',
36 | number: 0,
37 | date: now,
38 | createdAt: now,
39 | updatedAt: now,
40 | ...input,
41 | items: [] as Invoice['items'],
42 | });
43 | },
44 | successMessage: () => 'Successfully created invoice!',
45 | errorMessage: () => 'Failed to create invoice',
46 | onSuccess,
47 | });
48 |
49 | export default useCreateInvoice;
50 |
--------------------------------------------------------------------------------
/app/src/lib/invoices/useDeleteInvoice.ts:
--------------------------------------------------------------------------------
1 | import api from '@lib/api';
2 | import useMutation from '@lib/useMutation';
3 | import type {
4 | DeleteInvoiceInput,
5 | GetInvoicesOutput,
6 | } from '@server/invoices/types';
7 | import QueryKeys from './queryKeys';
8 |
9 | const useDeleteInvoice = () =>
10 | useMutation({
11 | mutationFn: api.deleteInvoice.mutate,
12 | cacheKey: QueryKeys.invoices,
13 | cacheUpdater: (invoices, input) => {
14 | const invoiceIndex = invoices.findIndex(({ id }) => id === input.id);
15 | if (invoiceIndex !== -1) {
16 | invoices.splice(invoiceIndex, 1);
17 | }
18 | },
19 | successMessage: () => 'Successfully deleted invoice!',
20 | errorMessage: () => 'Failed to delete invoice',
21 | });
22 |
23 | export default useDeleteInvoice;
24 |
--------------------------------------------------------------------------------
/app/src/lib/invoices/useInvoice.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from '@tanstack/react-query';
2 | import api from '@lib/api';
3 | import QueryKeys from './queryKeys';
4 |
5 | const useInvoice = (id: string) =>
6 | useQuery(QueryKeys.invoice(id), () => api.getInvoice.query({ id }));
7 |
8 | export default useInvoice;
9 |
--------------------------------------------------------------------------------
/app/src/lib/invoices/useInvoices.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from '@tanstack/react-query';
2 | import api from '@lib/api';
3 | import QueryKeys from './queryKeys';
4 |
5 | const useInvoices = () =>
6 | useQuery(QueryKeys.invoices, () => api.getInvoices.query());
7 |
8 | export default useInvoices;
9 |
--------------------------------------------------------------------------------
/app/src/lib/invoices/useLatestNumberByPrefix.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import useInvoices from './useInvoices';
3 |
4 | const useLatestNumberByPrefix = () => {
5 | const { data: invoices, ...rest } = useInvoices();
6 | const numbersByPrefix = useMemo(
7 | () =>
8 | (invoices || []).reduce((acc, invoice) => {
9 | const { prefix, number, status } = invoice;
10 | if (status === 'DRAFT') {
11 | return acc;
12 | }
13 |
14 | const current = acc[prefix] || 0;
15 | return {
16 | ...acc,
17 | [prefix]: Math.max(current, number || 0),
18 | };
19 | }, {} as { [key: string]: number }),
20 | [invoices]
21 | );
22 |
23 | return {
24 | ...rest,
25 | data: numbersByPrefix,
26 | };
27 | };
28 |
29 | export default useLatestNumberByPrefix;
30 |
--------------------------------------------------------------------------------
/app/src/lib/invoices/useUpdateInvoice.ts:
--------------------------------------------------------------------------------
1 | import omit from 'lodash.omit';
2 | import api from '@lib/api';
3 | import useMutation from '@lib/useMutation';
4 | import type {
5 | UpdateInvoiceInput,
6 | GetInvoicesOutput,
7 | Invoice,
8 | } from '@server/invoices/types';
9 | import QueryKeys from './queryKeys';
10 |
11 | type UseUpdateInvoiceArgs =
12 | | {
13 | onSuccess?: (invoice: Invoice) => void;
14 | }
15 | | undefined;
16 |
17 | const useUpdateInvoice = ({ onSuccess }: UseUpdateInvoiceArgs = {}) =>
18 | useMutation({
19 | mutationFn: api.updateInvoice.mutate,
20 | cacheKey: QueryKeys.invoices,
21 | cacheUpdater: (invoices, input) => {
22 | const invoiceIndex = invoices.findIndex(({ id }) => id === input.id);
23 | if (invoiceIndex !== -1) {
24 | invoices[invoiceIndex] = {
25 | ...invoices[invoiceIndex],
26 | ...omit(input, 'items'),
27 | };
28 | }
29 | },
30 | successMessage: () => 'Successfully updated invoice!',
31 | errorMessage: () => 'Failed to update invoice',
32 | onSuccess,
33 | });
34 |
35 | export default useUpdateInvoice;
36 |
--------------------------------------------------------------------------------
/app/src/lib/products/queryKeys.ts:
--------------------------------------------------------------------------------
1 | const QueryKeys = {
2 | products: ['products'],
3 | product: (id: string) => ['products', id],
4 | };
5 |
6 | export default QueryKeys;
7 |
--------------------------------------------------------------------------------
/app/src/lib/products/useCreateProduct.ts:
--------------------------------------------------------------------------------
1 | import cuid from 'cuid';
2 | import api from '@lib/api';
3 | import useMutation from '@lib/useMutation';
4 | import type {
5 | CreateProductInput,
6 | GetProductsOutput,
7 | Product,
8 | } from '@server/products/types';
9 | import QueryKeys from './queryKeys';
10 |
11 | type UseCreateProductArgs =
12 | | {
13 | onSuccess?: (product: Product) => void;
14 | }
15 | | undefined;
16 |
17 | const useCreateProduct = ({ onSuccess }: UseCreateProductArgs = {}) =>
18 | useMutation({
19 | mutationFn: api.createProduct.mutate,
20 | cacheKey: QueryKeys.products,
21 | cacheUpdater: (products, input) => {
22 | const now = new Date().toISOString();
23 | products.push({
24 | id: `new-product${cuid()}`,
25 | companyId: '',
26 | createdAt: now,
27 | updatedAt: now,
28 | includesVat: false,
29 | price: 0,
30 | currency: 'EUR',
31 | vat: 0,
32 | unit: 'hours',
33 | ...input,
34 | });
35 | },
36 | successMessage: () => 'Successfully created product!',
37 | errorMessage: () => 'Failed to create product',
38 | onSuccess,
39 | });
40 |
41 | export default useCreateProduct;
42 |
--------------------------------------------------------------------------------
/app/src/lib/products/useDeleteProduct.ts:
--------------------------------------------------------------------------------
1 | import api from '@lib/api';
2 | import useMutation from '@lib/useMutation';
3 | import type {
4 | DeleteProductInput,
5 | GetProductsOutput,
6 | } from '@server/products/types';
7 | import QueryKeys from './queryKeys';
8 |
9 | const useDeleteProduct = () =>
10 | useMutation({
11 | mutationFn: api.deleteProduct.mutate,
12 | cacheKey: QueryKeys.products,
13 | cacheUpdater: (products, input) => {
14 | const productIndex = products.findIndex(({ id }) => id === input.id);
15 | if (productIndex !== -1) {
16 | products.splice(productIndex, 1);
17 | }
18 | },
19 | successMessage: () => 'Successfully deleted product!',
20 | errorMessage: () => 'Failed to delete product',
21 | });
22 |
23 | export default useDeleteProduct;
24 |
--------------------------------------------------------------------------------
/app/src/lib/products/useProduct.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from '@tanstack/react-query';
2 | import api from '@lib/api';
3 | import QueryKeys from './queryKeys';
4 |
5 | const useProduct = (id: string) =>
6 | useQuery(QueryKeys.product(id), () => api.getProduct.query({ id }));
7 |
8 | export default useProduct;
9 |
--------------------------------------------------------------------------------
/app/src/lib/products/useProducts.ts:
--------------------------------------------------------------------------------
1 | import { useQuery } from '@tanstack/react-query';
2 | import api from '@lib/api';
3 | import QueryKeys from './queryKeys';
4 |
5 | const useProducts = () =>
6 | useQuery(QueryKeys.products, () => api.getProducts.query());
7 |
8 | export default useProducts;
9 |
--------------------------------------------------------------------------------
/app/src/lib/products/useUpdateProduct.ts:
--------------------------------------------------------------------------------
1 | import api from '@lib/api';
2 | import useMutation from '@lib/useMutation';
3 | import type {
4 | UpdateProductInput,
5 | GetProductsOutput,
6 | Product,
7 | } from '@server/products/types';
8 | import QueryKeys from './queryKeys';
9 |
10 | type UseUpdateProductArgs =
11 | | {
12 | onSuccess?: (data: Product) => void;
13 | }
14 | | undefined;
15 |
16 | const useUpdateProduct = ({ onSuccess }: UseUpdateProductArgs = {}) =>
17 | useMutation({
18 | mutationFn: api.updateProduct.mutate,
19 | cacheKey: QueryKeys.products,
20 | cacheUpdater: (products, input) => {
21 | const productIndex = products.findIndex(({ id }) => id === input.id);
22 | if (productIndex !== -1) {
23 | products[productIndex] = {
24 | ...products[productIndex],
25 | ...input,
26 | };
27 | }
28 | },
29 | onSuccess,
30 | successMessage: () => 'Successfully updated product!',
31 | errorMessage: () => 'Failed to update product',
32 | });
33 |
34 | export default useUpdateProduct;
35 |
--------------------------------------------------------------------------------
/app/src/lib/routes.ts:
--------------------------------------------------------------------------------
1 | const Routes = {
2 | home: '/',
3 | company: '/company',
4 | products: '/products',
5 | createProduct: '/products/new',
6 | product: (productId: string) => `/products/${productId}`,
7 | clients: '/clients',
8 | createClient: '/clients/new',
9 | client: (clientId: string) => `/clients/${clientId}`,
10 | invoices: '/invoices',
11 | createInvoice: '/invoices/new',
12 | invoice: (invoiceId: string) => `/invoices/${invoiceId}`,
13 | invoicePreview: (invoiceId: string) => `/invoices/${invoiceId}/preview`,
14 | signIn: '/api/auth/signin',
15 | notFound: '/404',
16 | privacyPolicy: '/beetbill_privacy_policy.pdf',
17 | termsAndConditions: '/beetbill_terms_and_conditions.pdf',
18 | cookiePolicy: '/beetbill_cookie_policy.pdf',
19 | };
20 |
21 | export default Routes;
22 |
--------------------------------------------------------------------------------
/app/src/lib/useDisclosure.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useState } from 'react';
2 |
3 | const useDisclosure = () => {
4 | const [isOpen, setOpen] = useState(false);
5 | const onOpen = useCallback(() => setOpen(true), [setOpen]);
6 | const onClose = useCallback(() => setOpen(false), [setOpen]);
7 | return {
8 | isOpen,
9 | onOpen,
10 | onClose,
11 | };
12 | };
13 |
14 | export default useDisclosure;
15 |
--------------------------------------------------------------------------------
/app/src/lib/useDisclosureForId.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useState } from 'react';
2 |
3 | const useDisclosureForId = () => {
4 | const [openFor, setOpenFor] = useState();
5 | const onOpen = useCallback((id: string) => setOpenFor(id), [setOpenFor]);
6 | const onClose = useCallback(() => setOpenFor(undefined), [setOpenFor]);
7 | return {
8 | isOpen: !!openFor,
9 | openFor,
10 | onOpen,
11 | onClose,
12 | };
13 | };
14 |
15 | export default useDisclosureForId;
16 |
--------------------------------------------------------------------------------
/app/src/lib/useDropdownAnchor.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef, useState } from 'react';
2 |
3 | const useDropdownAnchor = () => {
4 | const anchorRef = useRef(null);
5 | const [rect, setRect] = useState(() => new DOMRect());
6 | const handleUpdateRect = useCallback(() => {
7 | if (anchorRef.current) {
8 | setRect(anchorRef.current.getBoundingClientRect());
9 | }
10 | }, [anchorRef, setRect]);
11 | useEffect(() => {
12 | handleUpdateRect();
13 | window.addEventListener('scroll', handleUpdateRect);
14 | return () => window.removeEventListener('scroll', handleUpdateRect);
15 | }, [handleUpdateRect]);
16 |
17 | return {
18 | anchorRef,
19 | top: rect.top + rect.height,
20 | width: rect.width,
21 | };
22 | };
23 |
24 | export default useDropdownAnchor;
25 |
--------------------------------------------------------------------------------
/app/src/lib/useFilterFromUrl.ts:
--------------------------------------------------------------------------------
1 | import { useRouter } from 'next/router';
2 | import { useCallback } from 'react';
3 |
4 | const useFilterFromUrl = (): [string, (newFilter: string) => void] => {
5 | const { query, replace } = useRouter();
6 | const setFilter = useCallback(
7 | (newFilter: string) => {
8 | void replace({ query: { ...query, filter: newFilter } }, undefined, {
9 | shallow: true,
10 | });
11 | },
12 | [query, replace]
13 | );
14 |
15 | return [(query.filter || '') as string, setFilter];
16 | };
17 |
18 | export default useFilterFromUrl;
19 |
--------------------------------------------------------------------------------
/app/src/lib/useSortFromUrl.ts:
--------------------------------------------------------------------------------
1 | import type { ColumnSort } from '@tanstack/react-table';
2 | import { useRouter } from 'next/router';
3 | import { useCallback, useMemo } from 'react';
4 |
5 | const useSortFromUrl = (defaultSort: ColumnSort | undefined = undefined) => {
6 | const { query, push } = useRouter();
7 | const hasSort = 'sortBy' in query;
8 | const sortBy = query.sortBy as string | undefined;
9 | const sortDir = query.sortDir as string | undefined;
10 | const sorting: ColumnSort[] = useMemo(() => {
11 | if (hasSort) {
12 | return sortBy ? [{ id: sortBy, desc: sortDir === 'desc' }] : [];
13 | }
14 | return defaultSort ? [defaultSort] : [];
15 | }, [sortBy, sortDir, defaultSort, hasSort]);
16 | const toggleSort = useCallback(
17 | (id: string) => {
18 | const currentSortBy = sortBy ?? defaultSort?.id;
19 | const currentSortDir = sortDir ?? (defaultSort?.desc ? 'desc' : 'asc');
20 | let newSortBy: string | undefined;
21 | let newSortDir: string | undefined;
22 |
23 | if (currentSortBy === id && currentSortDir === 'desc') {
24 | newSortBy = id;
25 | newSortDir = 'asc';
26 | } else if (currentSortBy === id && currentSortDir === 'asc') {
27 | newSortBy = undefined;
28 | newSortDir = undefined;
29 | } else {
30 | newSortBy = id;
31 | newSortDir = 'desc';
32 | }
33 | void push(
34 | {
35 | query: {
36 | ...query,
37 | sortBy: newSortBy,
38 | sortDir: newSortDir,
39 | },
40 | },
41 | undefined,
42 | { shallow: true }
43 | );
44 | },
45 | [push, query, sortBy, sortDir, defaultSort]
46 | );
47 | return {
48 | sorting,
49 | toggleSort,
50 | };
51 | };
52 |
53 | export default useSortFromUrl;
54 |
--------------------------------------------------------------------------------
/app/src/lib/useSticky.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from 'react';
2 |
3 | const useSticky = () => {
4 | const ref = useRef(null);
5 | const [height, setHeight] = useState(0);
6 |
7 | useEffect(() => {
8 | setHeight(ref.current?.offsetHeight ?? 0);
9 | }, [ref]);
10 |
11 | return {
12 | ref,
13 | height,
14 | };
15 | };
16 |
17 | export default useSticky;
18 |
--------------------------------------------------------------------------------
/app/src/lib/userName.ts:
--------------------------------------------------------------------------------
1 | import type { Session } from 'next-auth';
2 | import capitalizeFirstLetter from './capitalizeFirstLetter';
3 |
4 | export const getFullName = (user: NonNullable) => {
5 | if (user.name) {
6 | const [firstName, lastName] = user.name.split(' ');
7 | return firstName && lastName ? `${firstName} ${lastName}` : firstName;
8 | }
9 | if (user.email) {
10 | const [email] = user.email.split('@');
11 | const [firstName, lastName] = email.split('.');
12 | return firstName && lastName
13 | ? `${capitalizeFirstLetter(firstName)} ${capitalizeFirstLetter(lastName)}`
14 | : firstName;
15 | }
16 | return '';
17 | };
18 |
19 | export const getInitials = (user: NonNullable) => {
20 | if (user.name) {
21 | const [firstName, lastName] = user.name.split(' ');
22 | return firstName && lastName
23 | ? `${firstName[0]}${lastName[0]}`
24 | : firstName[0];
25 | }
26 | if (user.email) {
27 | const [email] = user.email.split('@');
28 | const [firstName, lastName] = email.split('.');
29 | return firstName && lastName
30 | ? `${capitalizeFirstLetter(firstName)[0]}${
31 | capitalizeFirstLetter(lastName)[0]
32 | }`
33 | : capitalizeFirstLetter(firstName[0]);
34 | }
35 | return '';
36 | };
37 |
--------------------------------------------------------------------------------
/app/src/lib/utilityTypes.ts:
--------------------------------------------------------------------------------
1 | export type ArrayElement =
2 | ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
3 |
--------------------------------------------------------------------------------
/app/src/pages/404.page.test.tsx:
--------------------------------------------------------------------------------
1 | import 'next';
2 | import { setupServer } from 'msw/node';
3 | import { screen, render, mockSession } from '@lib/testing';
4 | import NotFoundPage from './404.page';
5 |
6 | const session = undefined;
7 | const server = setupServer();
8 |
9 | beforeAll(() => server.listen());
10 | beforeEach(() => server.resetHandlers(mockSession(session)));
11 | afterAll(() => server.close());
12 |
13 | describe('NotFoundPage', () => {
14 | it('renders the page', async () => {
15 | render(, { session });
16 |
17 | await screen.findByRole('link', { name: 'Home' });
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/app/src/pages/404.page.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head';
2 | import { faHouse } from '@fortawesome/free-solid-svg-icons';
3 | import AppName from '@lib/appName';
4 | import Routes from '@lib/routes';
5 | import LinkButton from '@components/LinkButton';
6 | import Card from '@components/Card';
7 |
8 | const NotFoundPage = () => (
9 |
10 |
11 | {`404 - ${AppName}`}
12 |
13 |
14 |
15 |
16 | Home
17 |
18 |
19 |
20 | );
21 |
22 | export default NotFoundPage;
23 |
--------------------------------------------------------------------------------
/app/src/pages/_document.next.tsx:
--------------------------------------------------------------------------------
1 | import { Html, Head, Main, NextScript } from 'next/document';
2 |
3 | const Document = () => (
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | );
19 |
20 | export default Document;
21 |
--------------------------------------------------------------------------------
/app/src/pages/api/auth/[...nextauth].route.ts:
--------------------------------------------------------------------------------
1 | import NextAuth from 'next-auth';
2 | import authOptions from '@server/auth/authOptions';
3 |
4 | export default NextAuth(authOptions);
5 |
--------------------------------------------------------------------------------
/app/src/pages/api/health.route.ts:
--------------------------------------------------------------------------------
1 | import type { NextApiRequest, NextApiResponse } from 'next';
2 | import prisma from '@server/prisma';
3 |
4 | type SuccessResponse = {
5 | invoiceCount: number;
6 | };
7 |
8 | type ErrorResponse = {
9 | message: string;
10 | };
11 |
12 | type ResponseData = SuccessResponse | ErrorResponse;
13 |
14 | export default async function handler(
15 | req: NextApiRequest,
16 | res: NextApiResponse
17 | ) {
18 | if (req.method !== 'GET') {
19 | return res.status(405).json({ message: 'Method Not Allowed' });
20 | }
21 |
22 | const apiKey = req.query.apiKey as string | undefined;
23 | if (apiKey !== process.env.API_KEY) {
24 | return res.status(401).json({ message: 'Unauthorized' });
25 | }
26 |
27 | const invoiceCount = await prisma.invoice.count();
28 | return res.status(200).json({ invoiceCount });
29 | }
30 |
--------------------------------------------------------------------------------
/app/src/pages/api/trpc/[trpc].route.ts:
--------------------------------------------------------------------------------
1 | import { createNextApiHandler } from '@trpc/server/adapters/next';
2 | import createContext from '@server/createContext';
3 | import router from '@server/router';
4 |
5 | export default createNextApiHandler({
6 | router,
7 | createContext,
8 | batching: { enabled: true },
9 | });
10 |
--------------------------------------------------------------------------------
/app/src/pages/auth/error.page.test.tsx:
--------------------------------------------------------------------------------
1 | import 'next';
2 | import { setupServer } from 'msw/node';
3 | import { screen, render, mockSession } from '@lib/testing';
4 | import ErrorPage from './error.page';
5 |
6 | const session = undefined;
7 | const server = setupServer();
8 |
9 | beforeAll(() => server.listen());
10 | afterAll(() => server.close());
11 |
12 | describe('ErrorPage', () => {
13 | beforeEach(() => {
14 | jest.resetAllMocks();
15 | server.resetHandlers(mockSession(session));
16 | });
17 |
18 | it('renders the page and shows the correct error message', async () => {
19 | render(, { session });
20 |
21 | await screen.findByRole('link', { name: 'Sign in' });
22 | await screen.findByText(
23 | 'The sign in link is no longer valid. It may have been used or it may have expired.'
24 | );
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/app/src/pages/auth/error.page.tsx:
--------------------------------------------------------------------------------
1 | import type { GetServerSideProps, InferGetServerSidePropsType } from 'next';
2 | import Head from 'next/head';
3 | import {
4 | faArrowRight,
5 | faTriangleExclamation,
6 | } from '@fortawesome/free-solid-svg-icons';
7 | import LinkButton from '@components/LinkButton';
8 | import AppName from '@lib/appName';
9 | import Routes from '@lib/routes';
10 | import WithNoAuthentication from '@components/WithNoAuthentication';
11 | import Card from '@components/Card';
12 |
13 | const Messages: Record = {
14 | Configuration: 'The application is misconfigured, please contact support.',
15 | AccessDenied: 'Your account has been blocked, please contact support.',
16 | Verification:
17 | 'The sign in link is no longer valid. It may have been used or it may have expired.',
18 | Default: 'Something went wrong, please try again.',
19 | };
20 |
21 | const ErrorPage = ({
22 | error,
23 | }: InferGetServerSidePropsType) => {
24 | const message = Messages[error] || Messages.Default;
25 | return (
26 |
27 |
28 | {`Log in - ${AppName}`}
29 |
30 | {message}
31 |
32 |
33 | Sign in
34 |
35 |
36 |
37 | );
38 | };
39 |
40 | export const getServerSideProps: GetServerSideProps = async (context) => ({
41 | props: {
42 | error: context.query.error || '',
43 | },
44 | });
45 |
46 | export default WithNoAuthentication(ErrorPage);
47 |
--------------------------------------------------------------------------------
/app/src/pages/auth/signin.page.tsx:
--------------------------------------------------------------------------------
1 | import type { GetServerSideProps, InferGetServerSidePropsType } from 'next';
2 | import { getProviders } from 'next-auth/react';
3 | import Head from 'next/head';
4 | import SignInForm from '@components/SignInForm';
5 | import WithNoAuthentication from '@components/WithNoAuthentication';
6 | import AppName from '@lib/appName';
7 |
8 | const SignInPage = ({
9 | providers,
10 | callbackUrl,
11 | error,
12 | }: InferGetServerSidePropsType) => (
13 | <>
14 |
15 | {`Log in - ${AppName}`}
16 |
17 |
18 |
19 | );
20 |
21 | export const getServerSideProps: GetServerSideProps = async (context) => {
22 | const providers = await getProviders();
23 |
24 | return {
25 | props: {
26 | providers,
27 | callbackUrl: context.query.callbackUrl || '',
28 | error: context.query.error || '',
29 | },
30 | };
31 | };
32 |
33 | export default WithNoAuthentication(SignInPage);
34 |
--------------------------------------------------------------------------------
/app/src/pages/auth/verify.page.test.tsx:
--------------------------------------------------------------------------------
1 | import 'next';
2 | import { setupServer } from 'msw/node';
3 | import { screen, render, mockSession } from '@lib/testing';
4 | import VerifyPage from './verify.page';
5 |
6 | const session = undefined;
7 | const server = setupServer();
8 |
9 | beforeAll(() => server.listen());
10 | afterEach(() => server.resetHandlers());
11 | afterAll(() => server.close());
12 |
13 | describe('VerifyPage', () => {
14 | beforeEach(() => {
15 | jest.resetAllMocks();
16 | server.resetHandlers(mockSession(session));
17 | });
18 |
19 | it('renders the page', async () => {
20 | render(, { session });
21 |
22 | await screen.findByRole('link', { name: 'Back' });
23 | });
24 | });
25 |
--------------------------------------------------------------------------------
/app/src/pages/auth/verify.page.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head';
2 | import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
3 | import AppName from '@lib/appName';
4 | import LinkButton from '@components/LinkButton';
5 | import Routes from '@lib/routes';
6 | import WithNoAuthentication from '@components/WithNoAuthentication';
7 | import Card from '@components/Card';
8 |
9 | const VerifyPage = () => (
10 |
11 |
12 | {`Log in - ${AppName}`}
13 |
14 |
15 | We just emailed you a link that will log you in securely.
16 |
17 |
18 |
19 | Back
20 |
21 |
22 |
23 | );
24 |
25 | export default WithNoAuthentication(VerifyPage);
26 |
--------------------------------------------------------------------------------
/app/src/pages/clients.page.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback } from 'react';
2 | import { faAdd } from '@fortawesome/free-solid-svg-icons';
3 | import Head from 'next/head';
4 | import EmptyContent from '@components/EmptyContent';
5 | import WithAuthentication from '@components/WithAuthentication';
6 | import Routes from '@lib/routes';
7 | import FullScreenSpinner from '@components/Layout/FullScreenSpinner';
8 | import LinkButton from '@components/LinkButton';
9 | import useClients from '@lib/clients/useClients';
10 | import useDeleteClient from '@lib/clients/useDeleteClient';
11 | import ClientsTable from '@components/ClientsTable';
12 | import AppName from '@lib/appName';
13 |
14 | const ClientsPage = () => {
15 | const { data: clients, isLoading } = useClients();
16 | const { mutate: deleteClient } = useDeleteClient();
17 | const handleDelete = useCallback(
18 | (clientId: string) => deleteClient({ id: clientId }),
19 | [deleteClient]
20 | );
21 |
22 | let content = null;
23 |
24 | if (isLoading) {
25 | content = ;
26 | } else if (!clients || clients.length === 0) {
27 | content = (
28 |
33 | );
34 | } else {
35 | content = (
36 |
37 |
38 |
Your clients
39 |
40 | Add client
41 |
42 |
43 |
44 |
36 |
37 |
Your invoices
38 |
39 | Add invoice
40 |
41 |
42 |
43 |
36 |
37 |
Your products
38 |
39 | Add product
40 |
41 |
42 |
43 |