@apptimate/ui 6.9.0 → 7.1.0

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/index.tsx

@@ -79,3 +79,4 @@ 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";