@apptimate/ui 7.0.0 → 7.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "7.0.0",
+  "version": "7.2.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {

package/src/common-components/PaymentSection.tsx

@@ -56,6 +56,8 @@ export interface PaymentSectionProps {
   onPaymentsChange: (payments: PaymentEntry[]) => void;
   /** Optional: show compact variant */
   compact?: boolean;
+  /** When true, initially show only Cash/Card with a 'More Options' toggle for other modes (used in POS) */
+  collapseModes?: boolean;
   /** Fetcher for payment modes */
   fetchPaymentModes: () => Promise<{ is_success: boolean; result?: any }>;
   /** Fetcher for bank accounts */
@@ -72,11 +74,12 @@ export interface PaymentSectionProps {
 
 /* ── Component ── */
 
-export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [], fetchChequeLeaves, variant = "default" }: PaymentSectionProps) {
+export function PaymentSection({ totalAmount, payments, onPaymentsChange, compact, collapseModes, fetchPaymentModes, fetchBankAccounts, materialTypes = [], allowedSpecialModes = [], fetchChequeLeaves, variant = "default" }: PaymentSectionProps) {
   const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [selectionMode, setSelectionMode] = useState<"single" | "split">("single");
+  const [showMoreModes, setShowMoreModes] = useState(false);
   const paymentsRef = useRef(payments);
 
   // Keep ref in sync
@@ -214,36 +217,74 @@ export function PaymentSection({ totalAmount, payments, onPaymentsChange, compac
   return (
     <div className="space-y-3">
       {/* ── Mode Selection Buttons ── */}
-      <div className="flex flex-wrap gap-2">
-        {paymentModes
-          .filter((m) => m.is_active)
-          .map((mode) => {
-            const isActive = selectionMode === "single" && payments.length === 1 && payments[0].mode_id === mode.id;
-            return (
-              <button key={mode.id} type="button" onClick={() => selectSingleMode(mode)}
+      {(() => {
+        const activeModes = paymentModes.filter((m) => m.is_active);
+        const primaryModes = activeModes.filter((m) => ["cash", "card"].includes(m.code));
+        const secondaryModes = activeModes.filter((m) => !["cash", "card"].includes(m.code));
+        // If a secondary mode is currently selected, auto-expand
+        const isSecondaryActive = selectionMode === "single" && payments.length === 1 && secondaryModes.some(m => m.id === payments[0].mode_id);
+        const shouldShowMore = !collapseModes || showMoreModes || isSecondaryActive || selectionMode === "split";
+
+        return (
+          <div className="flex flex-wrap gap-2">
+            {primaryModes.map((mode) => {
+              const isActive = selectionMode === "single" && payments.length === 1 && payments[0].mode_id === mode.id;
+              return (
+                <button key={mode.id} type="button" onClick={() => selectSingleMode(mode)}
+                  className={cn(
+                    "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
+                    isActive
+                      ? "bg-primary text-primary-foreground border-primary shadow-sm"
+                      : "bg-surface-0 border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
+                  )}>
+                  {getModeIcon(mode.code)}
+                  {mode.name}
+                </button>
+              );
+            })}
+
+            {/* More Options toggle */}
+            {secondaryModes.length > 0 && !shouldShowMore && (
+              <button type="button" onClick={() => setShowMoreModes(true)}
+                className="inline-flex items-center gap-1.5 px-3.5 py-2.5 text-[12px] font-semibold rounded-[10px] border border-dashed border-border-subtle text-foreground-subtle hover:border-primary/40 hover:text-primary hover:bg-primary/5 transition-all">
+                <span className="text-[14px]">···</span>
+                More Options
+              </button>
+            )}
+
+            {/* Secondary modes (shown when expanded) */}
+            {shouldShowMore && secondaryModes.map((mode) => {
+              const isActive = selectionMode === "single" && payments.length === 1 && payments[0].mode_id === mode.id;
+              return (
+                <button key={mode.id} type="button" onClick={() => selectSingleMode(mode)}
+                  className={cn(
+                    "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
+                    isActive
+                      ? "bg-primary text-primary-foreground border-primary shadow-sm"
+                      : "bg-surface-0 border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
+                  )}>
+                  {getModeIcon(mode.code)}
+                  {mode.name}
+                </button>
+              );
+            })}
+
+            {/* Split Button (shown when expanded) */}
+            {shouldShowMore && (
+              <button type="button" onClick={activateSplitMode}
                 className={cn(
                   "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
-                  isActive
+                  selectionMode === "split"
                     ? "bg-primary text-primary-foreground border-primary shadow-sm"
                     : "bg-surface-0 border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
                 )}>
-                {getModeIcon(mode.code)}
-                {mode.name}
+                <Split size={14} />
+                Multiple Methods
               </button>
-            );
-          })}
-        {/* Split Button */}
-        <button type="button" onClick={activateSplitMode}
-          className={cn(
-            "inline-flex items-center gap-2 px-4 py-2.5 text-[12px] font-semibold rounded-[10px] border transition-all",
-            selectionMode === "split"
-              ? "bg-primary text-primary-foreground border-primary shadow-sm"
-              : "bg-surface-0 border-border-subtle text-foreground-1 hover:border-primary/40 hover:bg-primary/5 hover:text-primary"
-          )}>
-          <Split size={14} />
-          Multiple Methods
-        </button>
-      </div>
+            )}
+          </div>
+        );
+      })()}
 
       {/* ── Single Mode: Entry with fields (no delete) ── */}
       {selectionMode === "single" && payments.length === 1 && (

package/src/common-components/attendance-shifts/BulkAttendanceModal.tsx

@@ -14,11 +14,12 @@ interface BulkAttendanceModalProps {
   onClose: () => void;
   onSuccess: () => void;
   fetchProjects?: () => Promise<any>;
+  fetchAccounts?: (type?: string) => Promise<any>;
   initialProjectId?: string;
   isFixedProject?: boolean;
 }
 
-export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects, initialProjectId, isFixedProject }: BulkAttendanceModalProps) {
+export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects, fetchAccounts, initialProjectId, isFixedProject }: BulkAttendanceModalProps) {
   const [projects, setProjects] = useState<any[]>([]);
   const [projectId, setProjectId] = useState<string>(initialProjectId || "");
   const [attendanceDate, setAttendanceDate] = useState<string>(new Date().toISOString().split("T")[0]);
@@ -26,6 +27,8 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
   const [globalEmployees, setGlobalEmployees] = useState<any[]>([]);
   const [isLoadingEmployees, setIsLoadingEmployees] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [accounts, setAccounts] = useState<any[]>([]);
+  const [paymentAccountId, setPaymentAccountId] = useState<string>("");
 
   // Time entries state: Record<employee_id, { in: string, out: string, break: number, isPresent: boolean, salaryAdvance: number }>
   const [timeEntries, setTimeEntries] = useState<Record<string, { in: string, out: string, break: number, isPresent: boolean, salaryAdvance: number }>>({});
@@ -34,8 +37,16 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
     if (isOpen) {
       loadProjects();
       loadGlobalEmployees();
+      if (fetchAccounts) {
+        fetchAccounts("asset").then((res) => {
+          if (res.is_success && res.result) {
+            setAccounts(res.result);
+          }
+        });
+      }
       setAttendanceDate(new Date().toISOString().split("T")[0]);
       setProjectId(initialProjectId || "");
+      setPaymentAccountId("");
       setTimeEntries({});
       
       // If initialProjectId is already set, the second useEffect won't trigger because projectId hasn't changed.
@@ -178,7 +189,7 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
       employees.forEach(emp => {
         const entry = timeEntries[emp.id];
         
-        if (!entry || !entry.isPresent) return;
+        if (!entry) return;
         
         if (String(emp.id).startsWith('wf-')) {
             // It's a workforce gang worker
@@ -186,29 +197,45 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
             const workforceId = parts[1];
             const memberIdentifier = parts[2] || null;
 
-            if (entry.in || entry.out) {
+            if (entry.isPresent) {
+                if (entry.in || entry.out) {
+                    workforcePunches.push({
+                        workforce_id: Number(workforceId),
+                        project_id: Number(projectId),
+                        date: attendanceDate,
+                        member_identifier: memberIdentifier,
+                        punch_in_time: entry.in || null,
+                        punch_out_time: entry.out || null,
+                        break_hours: entry.break || 0,
+                        salary_advance: entry.salaryAdvance || 0,
+                    });
+                } else if (entry.salaryAdvance > 0) {
+                    // If they only have a salary advance but no punch
+                    workforcePunches.push({
+                        workforce_id: Number(workforceId),
+                        project_id: Number(projectId),
+                        date: attendanceDate,
+                        member_identifier: memberIdentifier,
+                        salary_advance: entry.salaryAdvance,
+                    });
+                }
+            } else {
+                // ABSENT
                 workforcePunches.push({
                     workforce_id: Number(workforceId),
                     project_id: Number(projectId),
                     date: attendanceDate,
                     member_identifier: memberIdentifier,
-                    punch_in_time: entry.in || null,
-                    punch_out_time: entry.out || null,
-                    break_hours: entry.break || 0,
+                    punch_in_time: null,
+                    punch_out_time: null,
+                    break_hours: 0,
                     salary_advance: entry.salaryAdvance || 0,
                 });
-            } else if (entry.salaryAdvance > 0) {
-                // If they only have a salary advance but no punch
-                workforcePunches.push({
-                    workforce_id: Number(workforceId),
-                    project_id: Number(projectId),
-                    date: attendanceDate,
-                    member_identifier: memberIdentifier,
-                    salary_advance: entry.salaryAdvance,
-                });
             }
         } else {
             // It's a standard HR employee
+            if (!entry.isPresent) return; // Skip absent for HR for now
+
             if (entry.in) {
             hrPunches.push({
                 employee_id: emp.id,
@@ -251,7 +278,10 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
 
       // Log HR punches
       if (hrPunches.length > 0) {
-        const hrRes = await bulkPunchAttendance({ punches: hrPunches });
+        const hrRes = await bulkPunchAttendance({ 
+          punches: hrPunches,
+          payment_account_id: paymentAccountId ? Number(paymentAccountId) : undefined
+        });
         if (!hrRes.is_success) {
             toast.error(hrRes.message || "Failed to log HR attendance");
             hasError = true;
@@ -262,7 +292,14 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
       if (workforcePunches.length > 0) {
         // use sendRequest from core-lib which is imported at the top of this file
         const { sendRequest } = require("@apptimate/core-lib");
-        const wfRes = await sendRequest({ url: "/api/construction/workforce-attendance/bulk-punch", method: "POST", data: { punches: workforcePunches } });
+        const wfRes = await sendRequest({ 
+            url: "/api/construction/workforce-attendance/bulk-punch", 
+            method: "POST", 
+            data: { 
+                punches: workforcePunches,
+                payment_account_id: paymentAccountId ? Number(paymentAccountId) : undefined
+            } 
+        });
         if (!wfRes.responseData?.is_success) {
             toast.error(wfRes.responseData?.message || "Failed to log Workforce attendance");
             hasError = true;
@@ -286,7 +323,7 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="Bulk Attendance Log" size="2xl">
       <div className="space-y-4 py-2">
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">Date <span className="text-danger-500">*</span></label>
             <Input
@@ -298,20 +335,28 @@ export function BulkAttendanceModal({ isOpen, onClose, onSuccess, fetchProjects,
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">Project <span className="text-danger-500">*</span></label>
             <Select
+              options={projects.map((p) => ({ value: String(p.id), label: p.name }))}
               value={projectId}
               onChange={(e) => setProjectId(e.target.value)}
               disabled={isFixedProject}
-              options={[
-                { value: "", label: "Select Project..." },
-                ...projects.map((p) => ({
-                  value: String(p.id),
-                  label: p.name
-                }))
-              ]}
             />
           </div>
+          {fetchAccounts && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Payment Account <span className="text-gray-400 font-normal text-xs">(Salary Advances)</span></label>
+              <Select
+                options={[
+                  { value: "", label: "Default mapping" },
+                  ...accounts.map((a) => ({ value: String(a.id), label: `${a.code} - ${a.name}` }))
+                ]}
+                value={paymentAccountId}
+                onChange={(e) => setPaymentAccountId(e.target.value)}
+              />
+            </div>
+          )}
         </div>
 
+
         {projectId && attendanceDate && (
           <div className="mt-6 border border-gray-100 rounded-xl overflow-hidden bg-white shadow-sm">
             <Table>

package/src/common-components/transaction/MetadataPanel.tsx

@@ -36,12 +36,13 @@ interface MetadataPanelProps {
   isSubmitting: boolean;
   renderExtraMeta?: () => React.ReactNode;
   fetchChequeLeaves?: (query: string, page: number) => Promise<{ is_success: boolean; result?: any[] }>;
+  isFullscreen?: boolean;
 }
 
 export function MetadataPanel({
   config, lineItems, partyId, partyName, warehouseId, warehouseName, transactionDate, expectedDeliveryDate, notes, payments,
   onPartyChange, onWarehouseChange, onDateChange, onExpectedDeliveryDateChange, onNotesChange, onPaymentsChange, onSubmit, isSubmitting,
-  renderExtraMeta, fetchChequeLeaves,
+  renderExtraMeta, fetchChequeLeaves, isFullscreen,
 }: MetadataPanelProps) {
   const [paymentModes, setPaymentModes] = useState<PaymentMode[]>([]);
   const [bankAccounts, setBankAccounts] = useState<BankAccount[]>([]);
@@ -132,7 +133,9 @@ export function MetadataPanel({
   );
 
   return (
-    <div className="flex flex-col h-full gap-6">
+    <div className="flex flex-col h-full">
+      {/* ── Scrollable Content ── */}
+      <div className="flex-1 overflow-y-auto custom-scrollbar space-y-6 pr-1">
       {/* ── Extra Module-Specific Meta (e.g. adjustment type/reason) ── */}
       {renderExtraMeta && renderExtraMeta()}
 
@@ -216,8 +219,8 @@ export function MetadataPanel({
         </Section>
       )}
 
-      {/* ── Totals ── */}
-      {config.showPrices && lineItems.length > 0 && (
+      {/* ── Totals (hidden for POS — shown at bottom of left panel instead) ── */}
+      {config.showPrices && config.type !== 'pos' && lineItems.length > 0 && (
         <div className="bg-surface-0 rounded-[12px] border border-border-subtle p-4 space-y-2">
           <TotalRow label="Subtotal" value={formatCurrency(subtotal)} />
           {discountTotal > 0 && (
@@ -239,23 +242,29 @@ export function MetadataPanel({
             fetchBankAccounts={getBankAccountsLookup}
             fetchChequeLeaves={fetchChequeLeaves}
             compact={true}
+            collapseModes={config.type === 'pos'}
           />
         </Section>
       )}
+      </div>
 
-      {/* ── Spacer ── */}
-      <div className="flex-1" />
-
-      {/* ── Submit Button ── */}
-      <Button
-        type="submit"
-        color="primary"
-        isDisabled={lineItems.length === 0}
-        isLoading={isSubmitting}
-        className="!w-full !py-4 !text-[14px] !font-semibold !rounded-[10px]"
-      >
-        {config.submitLabel}
-      </Button>
+      {/* ── Submit Button (sticky bottom) ── */}
+      <div className="shrink-0 pt-4">
+        <Button
+          type="submit"
+          color="primary"
+          isDisabled={lineItems.length === 0}
+          isLoading={isSubmitting}
+          className={cn(
+            "!w-full !font-semibold transition-all",
+            isFullscreen 
+              ? "!h-[72px] !text-[18px] !rounded-[12px] shadow-lg shadow-primary/20" 
+              : "!py-4 !text-[14px] !rounded-[10px]"
+          )}
+        >
+          {config.submitLabel}
+        </Button>
+      </div>
     </div>
   );
 }

package/src/common-components/transaction/ProductSelectionPanel.tsx

@@ -353,7 +353,7 @@ export function ProductSelectionPanel({
   };
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col flex-1 min-h-0 w-full">
       {/* ── Search Bar ── */}
       {!config.disableItemSelection && (
         <div ref={panelRef} className="relative mb-4">

package/src/common-components/transaction/ProductTransactionScreen.tsx

@@ -31,6 +31,7 @@ export function ProductTransactionScreen({
   fetchChequeLeaves,
   initialData,
   onAddNewItem,
+  isFullscreen,
 }: ProductTransactionScreenProps) {
   // ── State ──
   const [lineItems, setLineItems] = useState<TransactionLineItem[]>([]);
@@ -503,7 +504,7 @@ export function ProductTransactionScreen({
       {/* ── Two-Panel Layout ── */}
       <div className="flex-1 flex gap-5 min-h-0">
         {/* Left: Product Selection (75%) */}
-        <div className="flex-[3] min-w-0 flex flex-col">
+        <div className="flex-[3] min-w-0 flex flex-col min-h-0">
           <ProductSelectionPanel
             config={config}
             partyId={partyId}
@@ -515,13 +516,41 @@ export function ProductTransactionScreen({
             onToggleExpand={handleToggleExpand}
             onAddNewItem={onAddNewItem}
           />
+
+          {/* ── POS: Amount to Pay Summary Bar ── */}
+          {config.type === 'pos' && lineItems.length > 0 && (
+            <div className="shrink-0 mt-3 bg-surface-0 rounded-[14px] border border-border-subtle px-5 py-3.5 flex items-center justify-between gap-6">
+              <div className="flex items-center gap-6">
+                <div className="flex items-center gap-2">
+                  <span className="text-[11.5px] font-semibold text-foreground-subtle uppercase tracking-wide">Subtotal</span>
+                  <span className="text-[13.5px] font-bold text-foreground-1">
+                    {subtotal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                  </span>
+                </div>
+                {discountTotal > 0 && (
+                  <div className="flex items-center gap-2">
+                    <span className="text-[11.5px] font-semibold text-foreground-subtle uppercase tracking-wide">Discount</span>
+                    <span className="text-[13.5px] font-bold text-green-600">
+                      -{discountTotal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                    </span>
+                  </div>
+                )}
+              </div>
+              <div className="flex items-center gap-3">
+                <span className="text-[12px] font-bold text-foreground-subtle uppercase tracking-wide">Amount to Pay</span>
+                <span className="text-[22px] font-extrabold text-foreground-0 tracking-tight tabular-nums">
+                  {grandTotal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                </span>
+              </div>
+            </div>
+          )}
         </div>
 
         {/* Divider */}
         <div className="w-px bg-border-subtle/60 shrink-0" />
 
         {/* Right: Metadata (25%) */}
-        <div className="flex-1 min-w-0 flex flex-col overflow-y-auto custom-scrollbar pr-1">
+        <div className="flex-1 min-w-0 flex flex-col">
           <MetadataPanel
             config={config}
             lineItems={lineItems}
@@ -617,6 +646,7 @@ export function ProductTransactionScreen({
             isSubmitting={submitting}
             renderExtraMeta={renderExtraMeta}
             fetchChequeLeaves={fetchChequeLeaves}
+            isFullscreen={isFullscreen}
           />
         </div>
       </div>

package/src/common-components/transaction/types.ts

@@ -319,6 +319,8 @@ export interface ProductTransactionScreenProps {
   initialData?: any;
   /** Optional callback to create a new item directly from the search bar */
   onAddNewItem?: (callbacks: { setItemSearch: (value: string) => void }) => void;
+  /** Whether the screen is currently in fullscreen mode */
+  isFullscreen?: boolean;
 }
 
 export interface TransactionPayload {

package/src/finance-components/DirectExpenseModal.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button, Input, ModalFooter, ChartOfAccountPicker, Modal } from "../index";
+import { PaymentSection, PaymentEntry } from "../index";
+import toast from "react-hot-toast";
+import { Upload, X } from "lucide-react";
+import { recordDirectExpenseShared, getPaymentModesShared, getBankAccountsLookupShared, getChartOfAccountsLookupShared } from "@apptimate/core-lib";
+
+interface DirectExpenseModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export default function DirectExpenseModal({ isOpen, onClose, onSuccess }: DirectExpenseModalProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [transactionDate, setTransactionDate] = useState(new Date().toISOString().split("T")[0]);
+  const [expenseAccountId, setExpenseAccountId] = useState<number | string>("");
+  const [totalAmount, setTotalAmount] = useState<string>("");
+  const [reference, setReference] = useState("");
+  const [description, setDescription] = useState("");
+  const [payments, setPayments] = useState<PaymentEntry[]>([]);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  React.useEffect(() => {
+    if (!isOpen) {
+      setTransactionDate(new Date().toISOString().split("T")[0]);
+      setExpenseAccountId("");
+      setTotalAmount("");
+      setReference("");
+      setDescription("");
+      setPayments([]);
+      setSelectedFiles([]);
+    }
+  }, [isOpen]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!expenseAccountId) {
+      toast.error("Please select an Expense Account");
+      return;
+    }
+
+    const amountNum = parseFloat(totalAmount);
+    if (isNaN(amountNum) || amountNum <= 0) {
+      toast.error("Please enter a valid total amount");
+      return;
+    }
+
+    if (payments.length === 0) {
+      toast.error("Please add at least one payment method");
+      return;
+    }
+
+    const totalToPay = payments.reduce((sum, p) => sum + (Number(p.amount) || 0), 0);
+    if (Math.abs(totalToPay - amountNum) > 0.01) {
+      toast.error(`Payment split (${totalToPay.toFixed(2)}) must exactly match the total amount (${amountNum.toFixed(2)})`);
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const formattedPayments = payments.map(p => {
+        const payload: any = {
+          payment_method: p.mode_code,
+          payment_amount: p.amount,
+        };
+
+        if (p.metadata) {
+          if (p.metadata.bank_account_id) payload.bank_account_id = p.metadata.bank_account_id;
+        }
+        return payload;
+      });
+
+      const res = await recordDirectExpenseShared({
+        expense_account_id: expenseAccountId,
+        transaction_date: transactionDate,
+        description: description || null,
+        reference: reference || null,
+        payments: formattedPayments,
+        attachments: selectedFiles,
+      });
+
+      if (res.is_success) {
+        toast.success("Direct expense recorded successfully");
+        onSuccess();
+        handleClose();
+      } else {
+        toast.error(res.message || "Failed to record expense");
+      }
+    } catch (e: any) {
+      toast.error(e.message || "An error occurred");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = () => {
+    setTransactionDate(new Date().toISOString().split("T")[0]);
+    setExpenseAccountId("");
+    setTotalAmount("");
+    setReference("");
+    setDescription("");
+    setPayments([]);
+    setSelectedFiles([]);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="Record Direct Expense"
+      size="md"
+    >
+      <form onSubmit={handleSubmit} className="space-y-5">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="flex flex-col gap-1.5">
+            <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Date *</label>
+            <Input
+              type="date"
+              value={transactionDate}
+              onChange={(e) => setTransactionDate(e.target.value)}
+              required
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Expense Account *</label>
+            <ChartOfAccountPicker
+              value={expenseAccountId}
+              onChange={(val) => setExpenseAccountId(val)}
+              fetchAccounts={getChartOfAccountsLookupShared}
+              filterType="expense"
+              label=""
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Total Amount *</label>
+          <Input
+            type="number"
+            step="0.01"
+            min="0"
+            value={totalAmount}
+            onChange={(e) => setTotalAmount(e.target.value)}
+            placeholder="0.00"
+            required
+          />
+        </div>
+
+        {parseFloat(totalAmount) > 0 && (
+          <div className="border border-border-subtle rounded-xl p-4 bg-gray-50/50">
+            <PaymentSection
+              totalAmount={parseFloat(totalAmount) || 0}
+              payments={payments}
+              onPaymentsChange={setPayments}
+              fetchPaymentModes={async () => {
+                const res = await getPaymentModesShared();
+                if (res.is_success && Array.isArray(res.result)) {
+                  res.result = res.result.filter((m: any) => {
+                    const code = m.code?.toLowerCase();
+                    return code !== "credit" && code !== "credit-metal" && code !== "credit-gold" && code !== "cheque";
+                  });
+                }
+                return res;
+              }}
+              fetchBankAccounts={getBankAccountsLookupShared}
+            />
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="flex flex-col gap-1.5">
+            <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Reference No</label>
+            <Input
+              value={reference}
+              onChange={(e) => setReference(e.target.value)}
+              placeholder="e.g. Receipt #1234"
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Description</label>
+            <Input
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="What was this for?"
+            />
+          </div>
+        </div>
+
+        {/* Attachments */}
+        <div className="flex flex-col gap-1.5">
+            <label className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Attachments</label>
+            <div 
+                className="border-2 border-dashed border-gray-200 rounded-xl p-4 flex flex-col items-center justify-center bg-gray-50/50 hover:bg-gray-100 transition-colors cursor-pointer group"
+                onClick={() => fileInputRef.current?.click()}
+            >
+                <input 
+                    type="file" 
+                    multiple 
+                    className="hidden" 
+                    ref={fileInputRef}
+                    onChange={(e) => {
+                        if (e.target.files) {
+                            setSelectedFiles(prev => [...prev, ...Array.from(e.target.files!)]);
+                        }
+                    }}
+                />
+                <div className="w-8 h-8 bg-white rounded-full shadow-sm flex items-center justify-center text-gray-500 mb-2 group-hover:scale-110 transition-transform">
+                    <Upload size={14} />
+                </div>
+                <p className="text-xs font-bold text-gray-700">Upload receipts or documents</p>
+            </div>
+            
+            {selectedFiles.length > 0 && (
+                <div className="flex flex-wrap gap-2 mt-2">
+                    {selectedFiles.map((file, index) => (
+                        <div key={`new-${index}`} className="relative bg-gray-100 rounded-md px-2 py-1 flex items-center gap-2 border border-gray-200 text-xs">
+                            <span className="truncate max-w-[120px]" title={file.name}>{file.name}</span>
+                            <button 
+                                type="button"
+                                onClick={() => setSelectedFiles(prev => prev.filter((_, i) => i !== index))} 
+                                className="text-red-500 hover:text-red-700"
+                            >
+                                <X size={12} />
+                            </button>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+
+        <ModalFooter>
+          <Button type="button" variant="flat" color="default" onClick={handleClose}>Cancel</Button>
+          <Button type="submit" color="primary" isLoading={isSubmitting}>Record Expense</Button>
+        </ModalFooter>
+      </form>
+    </Modal>
+  );
+}

package/src/finance-components/DirectTransactionDetailModal.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import React from "react";
+import { Modal, ModalFooter, Button, Badge, DateLabel } from "../index";
+
+interface DirectTransactionDetailModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  transaction: any | null;
+}
+
+export default function DirectTransactionDetailModal({
+  isOpen,
+  onClose,
+  transaction,
+}: DirectTransactionDetailModalProps) {
+  if (!isOpen || !transaction) return null;
+
+  const formatCurrency = (val: any) => {
+    return Number(val).toLocaleString("en-US", {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  };
+
+  const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Transaction Details" size="md">
+      <div className="space-y-6 text-sm">
+        <div className="grid grid-cols-2 gap-y-4 gap-x-6 border-b border-gray-100 pb-5">
+          <div className="space-y-1">
+            <p className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">
+              Type
+            </p>
+            <div>
+              <Badge
+                color={transaction.type === "income" ? "success" : "danger"}
+                variant="flat"
+              >
+                {transaction.type === "income" ? "Income" : "Expense"}
+              </Badge>
+            </div>
+          </div>
+          <div className="space-y-1">
+            <p className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">
+              Date
+            </p>
+            <div className="font-medium text-gray-900">
+              <DateLabel date={transaction.transaction_date} />
+            </div>
+          </div>
+          <div className="space-y-1">
+            <p className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">
+              Reference
+            </p>
+            <p className="font-medium text-gray-900">
+              {transaction.reference || "-"}
+            </p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">
+              Bank Account
+            </p>
+            <p className="font-medium text-gray-900">
+              {transaction.payment_method === "cash"
+                ? "Cash"
+                : transaction.bank_account?.account_name || "-"}
+            </p>
+          </div>
+          <div className="col-span-2 space-y-1">
+            <p className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">
+              Description
+            </p>
+            <p className="font-medium text-gray-900 whitespace-pre-wrap">
+              {transaction.description || "-"}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between pt-2 pb-5 border-b border-gray-100">
+          <p className="text-gray-500 font-medium">Total Amount</p>
+          <p className="text-xl font-bold text-gray-900">
+            {formatCurrency(transaction.amount)}
+          </p>
+        </div>
+
+        {/* Attachments Section */}
+        {transaction.attachments && transaction.attachments.length > 0 && (
+          <div className="space-y-3 pt-2">
+            <h3 className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">
+              Attachments ({transaction.attachments.length})
+            </h3>
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+              {transaction.attachments.map((attachment: any, idx: number) => {
+                const url = typeof attachment === 'string'
+                  ? (attachment.startsWith('http') ? attachment : `${API_URL}/storage/${attachment}`)
+                  : attachment.url;
+                  
+                const isImage = url?.match(/\.(jpeg|jpg|gif|png|webp)$/i) != null || 
+                  (typeof attachment === 'object' && attachment.mime_type?.startsWith('image/'));
+
+                return (
+                  <a
+                    key={idx}
+                    href={url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="block group relative rounded-lg border border-gray-200 overflow-hidden hover:border-primary/50 transition-colors bg-gray-50"
+                  >
+                    {isImage ? (
+                      <div className="aspect-square w-full">
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                          src={url}
+                          alt="Attachment"
+                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                        />
+                      </div>
+                    ) : (
+                      <div className="aspect-square w-full flex flex-col items-center justify-center p-3 text-center">
+                        <div className="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center mb-2 text-gray-400">
+                           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
+                        </div>
+                        <span className="text-[10px] font-medium text-gray-600 truncate w-full" title={attachment.original_name || attachment.filename || `File ${idx + 1}`}>
+                          {attachment.original_name || attachment.filename || `File ${idx + 1}`}
+                        </span>
+                      </div>
+                    )}
+                  </a>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <ModalFooter>
+        <Button variant="flat" color="secondary" onClick={onClose}>
+          Close
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}

package/src/index.tsx

@@ -79,3 +79,5 @@ export * from './common-components/attendance-shifts/AttendanceTimesheets';
 export * from "./base-components/ChartOfAccountPicker";
 export * from './common-components/print/TemplateRenderer';
 export { default as TransactionPrintSelector } from './common-components/print/TransactionPrintSelector';
+export { default as DirectExpenseModal } from "./finance-components/DirectExpenseModal";
+export { default as DirectTransactionDetailModal } from "./finance-components/DirectTransactionDetailModal";