feat: wip invoice customize

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCutomizeContentFields.tsx

@@ -0,0 +1,37 @@
+import { FInputGroup, FSwitch, Group, Stack } from '@/components';
+import { Classes } from '@blueprintjs/core';
+
+const items = [
+  { key: 'dueAmount', label: 'Due Amount' },
+  { key: 'billedTo', label: 'Billed To' },
+  { key: 'balanceDue', label: 'Balance Due' },
+  { key: 'termsConditions', label: 'Terms & Conditions' },
+];
+
+export function InvoiceCustomizeContentFields() {
+  return (
+    <Stack style={{ padding: 20, flex: '1 1 auto' }}>
+      <Stack>
+        <h2>General Branding</h2>
+        <p className={Classes.TEXT_MUTED}>
+          Set your invoice details to be automatically applied every time
you
+          create a new invoice.
+        </p>
+      </Stack>
+
+      <h1>Header</h1>
+
+      <Stack>
+        {items.map((item, index) => (
+          <Group position={'apart'} key={index}>
+            <FSwitch name={`item.${item.key}.enabled`} label={item.label} />
+            <FInputGroup
+              name={'item.dueAmount.text'}
+              placeholder={item.label}
+            />
+          </Group>
+        ))}
+      </Stack>
+    </Stack>
+  );
+}