diff --git a/src/components/dashboard/Officer_EventManagement.astro b/src/components/dashboard/Officer_EventManagement.astro index 56101d0..e4d652d 100644 --- a/src/components/dashboard/Officer_EventManagement.astro +++ b/src/components/dashboard/Officer_EventManagement.astro @@ -64,7 +64,7 @@ const totalPages = eventResponse.totalPages; const currentPage = eventResponse.page; --- -
+
diff --git a/src/components/dashboard/reimbursement/ReimbursementManagementPortal.tsx b/src/components/dashboard/reimbursement/ReimbursementManagementPortal.tsx index fa4197d..e15378f 100644 --- a/src/components/dashboard/reimbursement/ReimbursementManagementPortal.tsx +++ b/src/components/dashboard/reimbursement/ReimbursementManagementPortal.tsx @@ -88,7 +88,7 @@ export default function ReimbursementManagementPortal() { const [currentLogPage, setCurrentLogPage] = useState(1); const [currentNotePage, setCurrentNotePage] = useState(1); const logsPerPage = 5; - const notesPerPage = 5; + const [notesPerPage, setNotesPerPage] = useState(5); const [isPrivateNote, setIsPrivateNote] = useState(true); const [showRejectModal, setShowRejectModal] = useState(false); const [rejectReason, setRejectReason] = useState(''); @@ -651,16 +651,16 @@ export default function ReimbursementManagementPortal() { } return ( -
+
{/* Left side - List of reimbursements */} -
+
-
-

+
+

Reimbursement Requests

@@ -668,7 +668,7 @@ export default function ReimbursementManagementPortal() {
-
+
@@ -910,60 +910,36 @@ export default function ReimbursementManagementPortal() { initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 20 }} - className="card bg-base-100 sticky top-4 h-fit max-h-[calc(100vh-2rem)] overflow-y-auto border border-base-300 shadow-xl" + className="card bg-base-100 lg:sticky lg:top-4 h-fit max-h-[calc(100vh-1rem)] overflow-y-auto border border-base-300 shadow-xl" > -
-
-
-

{selectedReimbursement.title}

+
+
+
+

{selectedReimbursement.title}

-
+
Submitted by:
- - {showUserProfile === selectedReimbursement.submitted_by && ( -
-
-
- {selectedReimbursement.submitter?.avatar && ( - - )} -
-

{selectedReimbursement.submitter?.name}

-

{selectedReimbursement.submitter?.email}

-
-
-
-

Member since {new Date(selectedReimbursement.submitter?.created || '').toLocaleDateString()}

-

Last updated {new Date(selectedReimbursement.submitter?.updated || '').toLocaleDateString()}

-
-
-
- )}
-
+
{selectedReimbursement.status === 'submitted' && (
-
+
-
+

Date of Purchase

@@ -1053,7 +1029,7 @@ export default function ReimbursementManagementPortal() {

-
+

Payment Method

@@ -1062,7 +1038,7 @@ export default function ReimbursementManagementPortal() {

-
+

Department

@@ -1071,7 +1047,7 @@ export default function ReimbursementManagementPortal() {

-
+

Total Amount

${selectedReimbursement.total_amount.toFixed(2)} @@ -1084,25 +1060,16 @@ export default function ReimbursementManagementPortal() { Receipts ({selectedReimbursement.receipts?.length || 0})

-
+
{selectedReimbursement.receipts?.length === 0 ? ( -
- +
+

No receipts attached

) : ( selectedReimbursement.receipts?.map(receiptId => { const receipt = receipts[receiptId]; - if (!receipt) { - return ( -
-
- - Receipt not found (ID: {receiptId}) -
-
- ); - } + if (!receipt) return null; const isExpanded = expandedReceipts.has(receipt.id); @@ -1113,16 +1080,13 @@ export default function ReimbursementManagementPortal() { animate={{ opacity: 1, y: 0 }} className="card bg-base-200 hover:bg-base-300 transition-all duration-200" > -
-
toggleReceipt(receipt.id)} - > +
+
-

+

{receipt.location_name}

-
+
{receipt.location_address} @@ -1133,195 +1097,21 @@ export default function ReimbursementManagementPortal() {
- toggleReceipt(receipt.id)} > - - -
- - - {isExpanded && ( -
- -
- {receipt.field.toLowerCase().match(/\.(jpg|jpeg|png|gif|webp)$/) ? ( - - ) : receipt.field.toLowerCase().match(/\.(pdf)$/) ? ( -
- - PDF Document -
- ) : receipt.field.toLowerCase().match(/\.(doc|docx)$/) ? ( -
- - Word Document -
- ) : ( -
- - Document -
- )} -
-
- -
- -
- - - - - - - - - - {(() => { - try { - const expenses: ItemizedExpense[] = typeof receipt.itemized_expenses === 'string' - ? JSON.parse(receipt.itemized_expenses) - : receipt.itemized_expenses; - - if (!Array.isArray(expenses)) { - console.error('Itemized expenses is not an array:', expenses); - return ( - - - - ); - } - - return expenses.map((item: ItemizedExpense, index: number) => ( - - - - - - )); - } catch (error) { - console.error('Error parsing itemized expenses:', error); - return ( - - - - ); - } - })()} - - - - - -
DescriptionCategoryAmount
- Invalid expense data format -
{item.description} - - {item.category} - - - ${item.amount.toFixed(2)} -
- Error loading expense data -
- Tax: - - ${receipt.tax.toFixed(2)} -
-
-
- - {receipt.notes && ( -
- -
-

{receipt.notes}

-
-
- )} - -
-
- - Last updated {new Date(receipt.updated).toLocaleString()} -
- -
- - Audited by: - {receipt.audited_by.length === 0 ? ( - No auditors yet - ) : ( -
- {receipt.auditor_names?.map((name, index) => ( - - {name} - - ))} -
- )} -
- - {selectedReimbursement.status === 'under_review' && ( -
- {(() => { - const userId = Authentication.getInstance().getUserId(); - if (!userId) return null; - - return receipt.audited_by.includes(userId) ? ( - - - You have audited this receipt - - ) : ( - - ); - })()} -
- )} -
+ - )} - + +
); diff --git a/src/pages/dashboard.astro b/src/pages/dashboard.astro index 6f5299d..7680980 100644 --- a/src/pages/dashboard.astro +++ b/src/pages/dashboard.astro @@ -44,7 +44,7 @@ console.log("Available components:", Object.keys(components)); // Debug log