@accounter/client 0.0.8-alpha-20251023121008-8c51a83a479af2fcbc3aa02c876285dc4e21f02b → 0.0.8-alpha-20251023122652-765c7f951395441461726b3b4345eebd020632d7

package/src/components/businesses/index.tsx

@@ -1,18 +1,18 @@
 import { useCallback, useContext, useEffect, useState, type ReactElement } from 'react';
 import { Loader2, PanelTopClose, PanelTopOpen } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
 import { useQuery } from 'urql';
-import { Tooltip } from '@mantine/core';
-import { AllBusinessesForScreenDocument } from '../../gql/graphql.js';
+import { Table, Tooltip } from '@mantine/core';
+import {
+  AllBusinessesForScreenDocument,
+  type AllBusinessesForScreenQuery,
+} from '../../gql/graphql.js';
 import { useUrlQuery } from '../../hooks/use-url-query.js';
 import { cn } from '../../lib/utils.js';
 import { FiltersContext } from '../../providers/filters-context.js';
-import { ROUTES } from '../../router/routes.js';
-import { BusinessHeader } from '../business/business-header.js';
-import { InsertBusiness, MergeBusinessesButton } from '../common/index.js';
+import { MergeBusinessesButton } from '../common/index.js';
 import { PageLayout } from '../layout/page-layout.js';
 import { Button } from '../ui/button.js';
-import { Checkbox } from '../ui/checkbox.js';
+import { AllBusinessesRow } from './all-businesses-row.js';
 import { BusinessesFilters } from './businesses-filters.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
@@ -24,7 +24,7 @@ import { BusinessesFilters } from './businesses-filters.js';
         id
         name
         ... on LtdFinancialEntity {
-          ...BusinessHeader
+          ...AllBusinessesRowFields
         }
       }
       pageInfo {
@@ -43,7 +43,7 @@ export const Businesses = (): ReactElement => {
   );
   const { setFiltersContext } = useContext(FiltersContext);
 
-  const [{ data, fetching }, refetch] = useQuery({
+  const [{ data, fetching }] = useQuery({
     query: AllBusinessesForScreenDocument,
     variables: {
       page: activePage,
@@ -52,7 +52,6 @@ export const Businesses = (): ReactElement => {
     },
   });
 
-  const navigate = useNavigate();
   const [mergeSelectedBusinesses, setMergeSelectedBusinesses] = useState<
     Array<{ id: string; onChange: () => void }>
   >([]);
@@ -122,57 +121,41 @@ export const Businesses = (): ReactElement => {
   const selectedIds = new Set(mergeSelectedBusinesses.map(selected => selected.id));
 
   return (
-    <PageLayout
-      title={`Businesses (${businesses.length})`}
-      description="All businesses"
-      headerActions={
-        <div className="flex items-center py-4 gap-4">
-          <InsertBusiness description="" onAdd={() => refetch()} />
-        </div>
-      }
-    >
+    <PageLayout title={`Businesses (${businesses.length})`} description="All businesses">
       {fetching ? (
         <div className="flex flex-row justify-center">
           <Loader2 className={cn('h-10 w-10 animate-spin mr-2')} />
         </div>
       ) : (
-        <div className="space-y-2">
-          {businesses.map(business => (
-            <div
-              key={business.id}
-              className="group relative border rounded-lg hover:shadow-md transition-shadow"
-            >
-              <div className="flex items-center gap-3">
-                <div className="pl-4 flex items-center">
-                  <Checkbox
-                    checked={selectedIds.has(business.id)}
-                    onCheckedChange={() => {
-                      toggleMergeBusiness(business.id, () => {});
-                    }}
-                    className="h-4 w-4 rounded border-gray-300 cursor-pointer"
-                    onClick={(e): void => e.stopPropagation()}
-                  />
-                </div>
-                <div
-                  role="button"
-                  tabIndex={0}
-                  className="flex-1 cursor-pointer"
-                  onClick={(): void => {
-                    navigate(ROUTES.BUSINESSES.DETAIL(business.id));
-                  }}
-                  onKeyDown={(e): void => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                      e.preventDefault();
-                      navigate(ROUTES.BUSINESSES.DETAIL(business.id));
-                    }
-                  }}
-                >
-                  <BusinessHeader data={business} />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
+        <Table striped highlightOnHover>
+          <thead className="sticky top-0 z-20">
+            <tr className="px-10 py-10 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl">
+              <th>Name</th>
+              <th>Hebrew Name</th>
+              <th>More Info</th>
+            </tr>
+          </thead>
+          <tbody>
+            {businesses.map(business => (
+              <AllBusinessesRow
+                key={business.id}
+                data={
+                  business as Extract<
+                    NonNullable<AllBusinessesForScreenQuery['allBusinesses']>['nodes'][number],
+                    { __typename: 'LtdFinancialEntity' }
+                  >
+                }
+                isAllOpened={isAllOpened}
+                toggleMergeBusiness={
+                  toggleMergeBusiness
+                    ? (onChange: () => void): void => toggleMergeBusiness(business.id, onChange)
+                    : undefined
+                }
+                isSelectedForMerge={selectedIds.has(business.id) ?? false}
+              />
+            ))}
+          </tbody>
+        </Table>
       )}
     </PageLayout>
   );

package/src/components/common/forms/business-card.tsx

@@ -0,0 +1,234 @@
+import { useContext, useEffect, useState, type ReactElement } from 'react';
+import { useForm, type SubmitHandler } from 'react-hook-form';
+import { useQuery, type UseQueryExecute } from 'urql';
+import { Loader } from '@mantine/core';
+import {
+  FetchBusinessDocument,
+  type AllBusinessesRowFieldsFragment,
+  type FetchBusinessQuery,
+  type UpdateBusinessInput,
+} from '../../../gql/graphql.js';
+import { relevantDataPicker, type MakeBoolean } from '../../../helpers/index.js';
+import { useUpdateBusiness } from '../../../hooks/use-update-business.js';
+import { UserContext } from '../../../providers/user-provider.js';
+import { Form } from '../../ui/form.js';
+import { CopyToClipboardButton, SimilarChargesByBusinessModal } from '../index.js';
+import { ModifyBusinessFields } from './modify-business-fields.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- used by codegen
+/* GraphQL */ `
+  query FetchBusiness($id: UUID!) {
+    business(id: $id) {
+      __typename
+      id
+      ... on LtdFinancialEntity {
+        country
+        address
+        email
+        exemptDealer
+        governmentId
+        hebrewName
+        name
+        phoneNumber
+        sortCode {
+          id
+          key
+          name
+        }
+        taxCategory {
+          id
+          name
+        }
+        website
+        suggestions {
+          phrases
+          tags {
+            id
+            name
+          }
+          description
+          emails
+          emailListener {
+            internalEmailLinks
+            emailBody
+            attachments
+          }
+        }
+        optionalVAT
+        irsCode
+        pcn874RecordType
+      }
+    }
+  }
+`;
+
+interface Props {
+  businessID: string;
+  updateBusiness: React.Dispatch<React.SetStateAction<AllBusinessesRowFieldsFragment>>;
+}
+
+export function BusinessCard({ businessID, updateBusiness }: Props): ReactElement {
+  const [business, setBusiness] = useState<
+    Extract<FetchBusinessQuery['business'], { __typename: 'LtdFinancialEntity' }> | undefined
+  >(undefined);
+
+  // Form business data handle
+  const [{ data, fetching: businessFetching }, refetchBusiness] = useQuery({
+    query: FetchBusinessDocument,
+    variables: {
+      id: businessID,
+    },
+  });
+
+  useEffect(() => {
+    if (businessFetching) {
+      setBusiness(undefined);
+    } else if (data && data.business.__typename === 'LtdFinancialEntity') {
+      setBusiness(data.business);
+    }
+  }, [data, businessFetching]);
+
+  // on every business successful fetch, update the business in the parent component
+  useEffect(() => {
+    if (business) {
+      updateBusiness(business);
+    }
+  }, [business, updateBusiness]);
+
+  return (
+    <div className="flex flex-col gap-5">
+      {business ? (
+        <BusinessCardContent business={business} refetchBusiness={refetchBusiness} />
+      ) : businessFetching ? (
+        <Loader className="flex self-center my-5" color="dark" size="xl" variant="dots" />
+      ) : (
+        <p>Error fetching extended information for this business</p>
+      )}
+    </div>
+  );
+}
+
+interface ContentProps {
+  business: Extract<FetchBusinessQuery['business'], { __typename: 'LtdFinancialEntity' }>;
+  refetchBusiness: UseQueryExecute;
+}
+
+function BusinessCardContent({ business, refetchBusiness }: ContentProps): ReactElement {
+  const [fetching, setFetching] = useState<boolean>(false);
+  const [similarChargesOpen, setSimilarChargesOpen] = useState(false);
+  const [similarChargesData, setSimilarChargesData] = useState<
+    | {
+        tagIds?: { id: string }[];
+        description?: string;
+      }
+    | undefined
+  >(undefined);
+  const { userContext } = useContext(UserContext);
+
+  const { updateBusiness: updateDbBusiness, fetching: isBusinessLoading } = useUpdateBusiness();
+
+  // form management
+  const formManager = useForm<UpdateBusinessInput>({
+    defaultValues: {
+      ...business,
+      taxCategory: business.taxCategory?.id,
+      sortCode: business?.sortCode?.key,
+      irsCode: business?.irsCode,
+    },
+  });
+
+  const {
+    handleSubmit: handleBusinessSubmit,
+    formState: { dirtyFields: dirtyBusinessFields },
+  } = formManager;
+
+  const onBusinessSubmit: SubmitHandler<UpdateBusinessInput> = async data => {
+    if (!business || !userContext?.context.adminBusinessId) {
+      return;
+    }
+
+    const dataToUpdate = relevantDataPicker(data, dirtyBusinessFields as MakeBoolean<typeof data>);
+    if (dataToUpdate && Object.keys(dataToUpdate).length > 0) {
+      dataToUpdate.sortCode &&= parseInt(dataToUpdate.sortCode.toString());
+
+      if (dataToUpdate.suggestions?.tags) {
+        dataToUpdate.suggestions.tags = dataToUpdate.suggestions.tags.map(tag => ({ id: tag.id }));
+      }
+      if (dataToUpdate.suggestions?.phrases) {
+        dataToUpdate.suggestions.phrases = data.suggestions!.phrases!.map(phrase => phrase);
+      }
+      if (dataToUpdate.suggestions?.emails) {
+        dataToUpdate.suggestions.emails = data.suggestions!.emails!.map(email => email);
+      }
+      if (dataToUpdate.suggestions?.emailListener) {
+        dataToUpdate.suggestions.emailListener.attachments &&=
+          data.suggestions!.emailListener!.attachments!.map(type => type);
+        dataToUpdate.suggestions.emailListener.internalEmailLinks &&=
+          data.suggestions!.emailListener!.internalEmailLinks!.map(link => link);
+      }
+
+      await updateDbBusiness({
+        businessId: business.id,
+        ownerId: userContext.context.adminBusinessId,
+        fields: dataToUpdate,
+      });
+
+      if (dataToUpdate.suggestions?.tags?.length || dataToUpdate.suggestions?.description) {
+        setSimilarChargesData({
+          tagIds: dataToUpdate.suggestions?.tags?.map(t => ({ id: t.id })),
+          description: dataToUpdate.suggestions?.description ?? undefined,
+        });
+        setSimilarChargesOpen(true);
+      } else {
+        refetchBusiness();
+      }
+    }
+  };
+
+  return (
+    <>
+      {fetching && (
+        <Loader className="flex self-center my-5" color="dark" size="xl" variant="dots" />
+      )}
+      <div className="flex flex-row gap-5">
+        <Form {...formManager}>
+          <form onSubmit={handleBusinessSubmit(onBusinessSubmit)}>
+            <div className="flex flex-row mx-3 pt-3 sm:text-1xl gap-10">
+              <h1 className="sm:text-2xl font-small text-gray-900">Edit Business:</h1>
+              <div className="flex flex-row gap-2">
+                ID: {business.id}
+                <CopyToClipboardButton content={business.id} />
+              </div>
+            </div>
+            <div className="flex-row px-10 h-max justify-start block">
+              <ModifyBusinessFields
+                isInsert={false}
+                formManager={formManager}
+                setFetching={setFetching}
+              />
+            </div>
+            <div className="mt-10 mb-5 flex justify-center gap-5">
+              <button
+                type="submit"
+                onClick={(): (() => Promise<void>) => handleBusinessSubmit(onBusinessSubmit)}
+                className="mt-8 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-hidden hover:bg-indigo-600 rounded-sm text-lg"
+                disabled={isBusinessLoading || Object.keys(dirtyBusinessFields).length === 0}
+              >
+                Update
+              </button>
+            </div>
+          </form>
+        </Form>
+      </div>
+
+      <SimilarChargesByBusinessModal
+        businessId={business.id}
+        tagIds={similarChargesData?.tagIds}
+        description={similarChargesData?.description}
+        open={similarChargesOpen}
+        onOpenChange={setSimilarChargesOpen}
+        onClose={refetchBusiness}
+      />
+    </>
+  );
+}

package/src/components/common/forms/index.ts

@@ -1,3 +1,4 @@
+export * from './business-card.js';
 export * from './edit-charge.js';
 export * from './edit-document.js';
 export * from './edit-misc-expense.js';