@apptimate/ui 7.1.0 → 7.3.0

package/src/finance-components/DirectTransactionDetailModal.tsx

@@ -0,0 +1,153 @@
+"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">
+              Account
+            </p>
+            <p className="font-medium text-gray-900">
+              {transaction.account?.name || "-"}
+            </p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-[11px] font-bold text-gray-500 uppercase tracking-wider">
+              Paid Via
+            </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

@@ -11,6 +11,7 @@ export * from './base-components/ChipInput';
 export * from './base-components/Divider';
 export * from './base-components/Dropdown';
 export * from './base-components/EmptyState';
+export * from './base-components/FormattedNumberInput';
 export * from './base-components/HintIcon';
 export * from './base-components/RecordCount';
 export * from './base-components/DateLabel';
@@ -49,6 +50,7 @@ export * from './common-components/pickers/EntityPickerModal';
 export * from './common-components/pickers/UomGroupPicker';
 export * from './common-components/pickers/UomPicker';
 export * from './common-components/pickers/PartyPicker';
+export * from './common-components/pickers/QuickPartyAddModal';
 export * from './common-components/pickers/WarehousePicker';
 
 // Item Wizard
@@ -80,3 +82,4 @@ 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";