@driveflux/pdf 4.0.77 → 5.0.0-feature-e-invoicing.0

package/package.json

@@ -1,52 +1,46 @@
 {
   "name": "@driveflux/pdf",
-  "version": "4.0.77",
+  "version": "5.0.0-feature-e-invoicing.0",
   "type": "module",
+  "author": {
+    "name": "Aladdin Bouzerd",
+    "email": "aladin@driveflux.com",
+    "url": "https://driveflux.com"
+  },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/main.js",
+      "types": "./dist/main.d.ts"
     }
   },
-  "files": [
-    "dist"
-  ],
+  "scripts": {
+    "build": "bun run ./build.ts",
+    "build:all": "bun tsc --emitDeclarationOnly && bun run ./build.ts",
+    "typecheck": "tsc -b --noEmit",
+    "dev": "bun --watch src/preview/server.ts"
+  },
   "dependencies": {
-    "@driveflux/db": "4.1.19",
-    "@driveflux/env": "3.0.1",
-    "@driveflux/format-money": "7.0.1",
-    "@driveflux/time": "6.0.3",
-    "@react-pdf/renderer": "^4.5.1",
+    "@driveflux/beam": "^3.0.0",
+    "@driveflux/db": "4.0.24-feature-e-invoicing.0",
+    "@driveflux/logger": "1.0.1",
+    "@driveflux/singleton": "3.0.0",
     "date-fns": "^4.1.0",
-    "nodemon": "^3.1.14",
-    "react": "19.2.6"
+    "@date-fns/tz": "^1.4.1",
+    "@elysiajs/eden": "^1.4.6",
+    "elysia": "^1.4.19",
+    "@react-pdf/renderer": "^4.3.1",
+    "arktype": "^2.1.22",
+    "bun-plugin-tailwind": "^0.1.2",
+    "nuqs": "^2.8.5",
+    "tailwindcss": "^4.1.17"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.29.5",
-    "@driveflux/fab": "4.0.1",
-    "@driveflux/tsconfig": "3.0.1",
-    "@swc/cli": "^0.8.1",
-    "@swc/core": "^1.15.33",
-    "@types/node": "^25.7.0",
-    "@types/react": "19.2.14",
-    "del-cli": "^7.0.0",
-    "react": "19.2.6",
-    "typescript": "^6.0.3"
-  },
-  "peerDependencies": {
-    "react": "19.2.6"
-  },
-  "scripts": {
-    "build": "fab",
-    "debug": "pnpm build && node dist/debug.js",
-    "dev": "pnpm debug && node dist/watch.js",
-    "clean": "fab clean",
-    "build:js": "fab -t esm",
-    "build:types": "fab -t types",
-    "type-check": "tsc --noEmit",
-    "check": "biome check --write ./src",
-    "lint:errors": "pnpm lint --diagnostic-level error",
-    "format": "biome format --write ./src",
-    "lint": "biome lint --write --unsafe ./src"
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@types/bun": "^1.3",
+    "typescript": "5.9.3",
+    "@driveflux/fix-builds": "1.0.0"
   }
-}
+}

package/src/config.ts

@@ -0,0 +1,42 @@
+import { type } from 'arktype'
+
+declare global {
+  var __pdfConfig: Config
+}
+
+if (typeof globalThis.__pdfConfig === 'undefined') {
+  globalThis.__pdfConfig = undefined as any
+}
+
+export type Config = (typeof Config)['infer']
+
+export const Config = type({
+  appUrl: 'string.url',
+  timezone: 'string',
+})
+
+const parseEnvConfig = () => ({
+  appUrl: 'http://localhost:3000',
+  timezone: 'Asia/Kuala_Lumpur',
+})
+
+const loadConfigInternal = () => {
+  return Object.freeze(Config.assert(parseEnvConfig()))
+}
+
+export let config = globalThis.__pdfConfig ?? loadConfigInternal()
+
+export const loadConfig = () => {
+  globalThis.__pdfConfig = loadConfigInternal()
+  config = globalThis.__pdfConfig
+  return config
+}
+
+export const setConfig = <K extends keyof Config>(key: K, value: Config[K]) => {
+  globalThis.__pdfConfig = {
+    ...globalThis.__pdfConfig,
+    [key]: value,
+  }
+  config = globalThis.__pdfConfig
+  return config
+}

package/src/create-logger.ts

@@ -0,0 +1,4 @@
+import { createLogger } from '@driveflux/logger'
+
+export const createScopedLogger = (name: string) =>
+  createLogger(`flux:pdf:${name}`)

package/src/errors.ts

@@ -0,0 +1,35 @@
+export abstract class PDFError extends Error {
+  abstract readonly code: string
+  abstract readonly status: number
+
+  toResponse() {
+    return Response.json(
+      {
+        error: this.message,
+        code: this.code,
+      },
+      {
+        status: this.status,
+      },
+    )
+  }
+}
+
+export const PDFErrors = {
+  InvoiceNotEInvoice: class InvoiceNotEInvoice extends PDFError {
+    readonly code = 'invoice_not_einvoice'
+    readonly status = 400
+
+    constructor(readonly invoiceId: string) {
+      super(`Invoice ${invoiceId} is not an e-invoice`)
+    }
+  },
+  InvoiceNotFound: class InvoiceNotFound extends PDFError {
+    readonly code = 'invoice_not_found'
+    readonly status = 404
+
+    constructor(readonly invoiceId: string) {
+      super(`Invoice ${invoiceId} not found`)
+    }
+  },
+} as const

package/src/main.ts

@@ -0,0 +1,7 @@
+import { createScopedLogger } from './create-logger'
+
+const _log = createScopedLogger('main')
+
+export const main = () => {
+  console.info('Hello, world!')
+}

package/src/preview/api.ts

@@ -0,0 +1,33 @@
+import { isId } from '@driveflux/db/id'
+import { type } from 'arktype'
+import Elysia, { status } from 'elysia'
+import { PDFError, PDFErrors } from '../errors'
+import { repository } from '../repository'
+
+export const api = new Elysia()
+  .error(PDFErrors)
+  .onError(({ error }) => {
+    if (error instanceof PDFError) {
+      return status(
+        error.status as (typeof PDFErrors)[keyof typeof PDFErrors]['prototype']['status'],
+        {
+          code: error.code as (typeof PDFErrors)[keyof typeof PDFErrors]['prototype']['code'],
+          context: 'PDFError',
+          message: error.message,
+        },
+      )
+    }
+  })
+  .get(
+    '/api/invoice-for-pdf/:invoiceId',
+    async ({ params }) => {
+      return await repository.getInvoiceForPDF(params.invoiceId)
+    },
+    {
+      params: type({
+        invoiceId: type('string')
+          .narrow((id) => isId(id, true, ['Invoice']))
+          .describe('Invoice ID must be a valid FLUX invoice ID'),
+      }),
+    },
+  )

package/src/preview/client/app.tsx

@@ -0,0 +1,30 @@
+import Box from '@driveflux/beam/box'
+import Text from '@driveflux/beam/text'
+import { Toaster } from '@driveflux/beam/toast'
+import { cn } from '@driveflux/beam/utils'
+import '../global.css'
+import { Preview } from './preview'
+import { Sidebar } from './sidebar'
+import { useTarget } from './use-target'
+
+export const App = () => {
+  const [target, setTarget] = useTarget()
+  return (
+    <Box className="flex h-screen overflow-hidden">
+      <Box className="flex-shrink-0 overflow-y-auto">
+        <Sidebar onSelect={setTarget} selectedTarget={target} />
+      </Box>
+      <Box className="flex-1 overflow-hidden">
+        <main className={cn('flex flex-col items-center w-full h-full')}>
+          {target && <Preview target={target} />}
+          {!target && (
+            <Box className="w-full h-full flex flex-col flex-grow-1 items-center justify-center">
+              <Text>Select a target to preview</Text>
+            </Box>
+          )}
+        </main>
+      </Box>
+      <Toaster />
+    </Box>
+  )
+}

package/src/preview/client/invoice/invoice-display.tsx

@@ -0,0 +1,27 @@
+import { Document } from '@react-pdf/renderer'
+import { FLUXInvoice } from '../../../templates/invoice/flux-invoice'
+import {
+  HostInvoice,
+  type HostInvoiceProps,
+} from '../../../templates/invoice/host-invoice'
+import { InvoiceSummary } from '../../../templates/invoice/invoice-summary'
+import type { InvoiceForPDF } from '../../../templates/invoice/types'
+import { registerFonts } from '../../fonts/register-fonts'
+
+export type InvoiceDisplayProps = {
+  invoice: InvoiceForPDF
+}
+
+registerFonts()
+
+export const InvoiceDisplay = ({ invoice }: InvoiceDisplayProps) => {
+  return (
+    <Document>
+      <InvoiceSummary data={invoice} />
+      <FLUXInvoice data={invoice} />
+      {invoice.eInvoice?.hostDetails && (
+        <HostInvoice data={invoice as HostInvoiceProps['data']} />
+      )}
+    </Document>
+  )
+}

package/src/preview/client/invoice/invoice-setup.tsx

@@ -0,0 +1,95 @@
+import Box from '@driveflux/beam/box'
+import Button from '@driveflux/beam/button'
+import HStack from '@driveflux/beam/hstack'
+import Input from '@driveflux/beam/input'
+import { toast } from '@driveflux/beam/toast'
+import { useCallback, useEffect, useState } from 'react'
+import { appTreaty } from '../treaty'
+import type { InvoiceDisplayProps } from './invoice-display'
+
+type Props = {
+  onPropsUpdated: (props: InvoiceDisplayProps | { error: string }) => void
+}
+
+let submitted = false
+export const InvoiceSetup = ({ onPropsUpdated }: Props) => {
+  const [invoiceId, setInvoiceId] = useState<string>('')
+
+  const fetchInvoice = useCallback(
+    async (invoiceId: string) => {
+      const result = await appTreaty.api['invoice-for-pdf']({
+        invoiceId,
+      }).get()
+
+      if (result.status === 404) {
+        toast({
+          title: 'Invoice not found',
+          description: 'The invoice you are looking for does not exist.',
+          status: 'error',
+        })
+        return
+      }
+
+      if (result.error) {
+        const error =
+          typeof result.error === 'string'
+            ? (result as any).error
+            : (result as any).error.value.summary ||
+              result.error.value.message ||
+              'An unknown error occurred'
+        toast({
+          title: 'Error',
+          description: error,
+
+          status: 'error',
+        })
+        onPropsUpdated({ error })
+        return
+      }
+
+      onPropsUpdated({ invoice: result.data })
+      return result
+    },
+    [onPropsUpdated],
+  )
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault()
+      await fetchInvoice(invoiceId)
+    },
+    [fetchInvoice, invoiceId],
+  )
+
+  useEffect(() => {
+    if (!invoiceId) {
+      setInvoiceId('I_JLJXH4JL')
+    }
+  }, [invoiceId])
+  useEffect(() => {
+    if (invoiceId === 'I_JLJXH4JL' && !submitted) {
+      submitted = true
+      handleSubmit(
+        new Event('submit') as unknown as React.FormEvent<HTMLFormElement>,
+      )
+    }
+  }, [invoiceId, handleSubmit])
+
+  return (
+    <Box>
+      <form onSubmit={handleSubmit}>
+        <HStack className="items-end">
+          <Input
+            htmlFor="invoiceId"
+            id="invoiceId"
+            label="Invoice ID"
+            type="text"
+            value={invoiceId}
+            onChange={(e) => setInvoiceId(e.target.value)}
+          />
+          <Button type="submit">Ok</Button>
+        </HStack>
+      </form>
+    </Box>
+  )
+}

package/src/preview/client/preview-targets.ts

@@ -0,0 +1,30 @@
+import type { FunctionComponent, LazyExoticComponent } from 'react'
+import { InvoiceDisplay } from './invoice/invoice-display'
+import { InvoiceSetup } from './invoice/invoice-setup'
+
+type PreviewTargetSetup =
+  | LazyExoticComponent<
+      FunctionComponent<{ onPropsUpdated: (props: any) => void }>
+    >
+  | FunctionComponent<{ onPropsUpdated: (props: any) => void }>
+
+type PreviewTargetDisplay =
+  | LazyExoticComponent<FunctionComponent<any>>
+  | FunctionComponent<any>
+
+export const PREVIEW_TARGETS = {
+  invoice: {
+    title: 'Invoice',
+    Setup: InvoiceSetup,
+    Display: InvoiceDisplay,
+  },
+} as const satisfies Record<
+  string,
+  {
+    title: string
+    Setup: PreviewTargetSetup
+    Display: PreviewTargetDisplay
+  }
+>
+
+export type PreviewTarget = keyof typeof PREVIEW_TARGETS

package/src/preview/client/preview.tsx

@@ -0,0 +1,37 @@
+import Box from '@driveflux/beam/box'
+import Divider from '@driveflux/beam/divider'
+import Text from '@driveflux/beam/text'
+import VStack from '@driveflux/beam/vstack'
+import { PDFViewer } from '@react-pdf/renderer'
+import { useState } from 'react'
+import { PREVIEW_TARGETS, type PreviewTarget } from './preview-targets'
+
+type Props = {
+  target: PreviewTarget
+}
+
+export const Preview = ({ target }: Props) => {
+  const { Setup, Display } = PREVIEW_TARGETS[target]
+  const [props, setProps] = useState<any>(null)
+
+  const error =
+    typeof props === 'object' &&
+    props !== null &&
+    'error' in props &&
+    props.error
+  const displayResult = props && !error ? <Display {...(props ?? {})} /> : null
+  return (
+    <VStack className="w-full h-full">
+      {Setup && (
+        <Box className="w-full p-4 flex-shrink-0">
+          <Setup onPropsUpdated={setProps} />
+        </Box>
+      )}
+      <Divider />
+      {displayResult && (
+        <PDFViewer className="w-full h-svh">{displayResult}</PDFViewer>
+      )}
+      {error ? <Text>{error}</Text> : null}
+    </VStack>
+  )
+}

package/src/preview/client/sidebar.tsx

@@ -0,0 +1,39 @@
+import Box from '@driveflux/beam/box'
+import Button from '@driveflux/beam/button'
+import Text from '@driveflux/beam/text'
+import { cn } from '@driveflux/beam/utils'
+import { PREVIEW_TARGETS, type PreviewTarget } from './preview-targets'
+
+type Props = {
+  onSelect: (target: PreviewTarget) => void
+  selectedTarget?: PreviewTarget | null
+}
+
+export const Sidebar = ({ onSelect, selectedTarget }: Props) => {
+  return (
+    <Box className="w-64 bg-gray-50 border-r border-gray-200 min-h-screen p-4">
+      <Text className="text-lg font-semibold mb-4 text-gray-800">
+        Preview Targets
+      </Text>
+      <Box className="space-y-2">
+        {Object.entries(PREVIEW_TARGETS).map(([key, target]) => (
+          <Button
+            key={key}
+            variant={selectedTarget === key ? 'outline' : undefined}
+            disabled={selectedTarget === key}
+            className={cn(
+              'w-full',
+              // 'p-3 rounded-lg cursor-pointer transition-all duration-200 border',
+              // selectedTarget === key
+              //   ? 'bg-blue-500 text-white border-blue-500 shadow-md'
+              //   : 'bg-white text-gray-700 border-gray-200 hover:bg-gray-100 hover:border-gray-300 hover:shadow-sm',
+            )}
+            onClick={() => onSelect(key as PreviewTarget)}
+          >
+            <Text className="font-medium">{target.title}</Text>
+          </Button>
+        ))}
+      </Box>
+    </Box>
+  )
+}

package/src/preview/client/treaty.ts

@@ -0,0 +1,8 @@
+import { treaty } from '@elysiajs/eden'
+import type { api } from '../api'
+
+export const appTreaty = treaty<typeof api>(
+  process.env.FLUX_PUBLIC_APP_URL
+    ? `${process.env.FLUX_PUBLIC_APP_URL}`
+    : 'http://localhost:3000',
+)

package/src/preview/client/use-target.ts

@@ -0,0 +1,11 @@
+import { parseAsStringLiteral, useQueryState } from 'nuqs'
+import { PREVIEW_TARGETS, type PreviewTarget } from './preview-targets'
+
+const parser = parseAsStringLiteral(
+  Object.keys(PREVIEW_TARGETS) as PreviewTarget[],
+)
+
+export const useTarget = () => {
+  const state = useQueryState('target', parser)
+  return state
+}