322 lines
11 KiB
TypeScript
322 lines
11 KiB
TypeScript
import {
|
|
decryptDataWithStoredPassword,
|
|
encryptDataWithStoredPassword,
|
|
getEncryptionPassword,
|
|
MakeNewDate,
|
|
} from "../helpers.ts";
|
|
import { Obligation } from "../services/financhalServices.ts";
|
|
import { useEffect, useRef, useState } from "preact/hooks";
|
|
import { PopAddObligationDialog } from "./dialogs/PopAddObligationDialog.tsx";
|
|
|
|
interface Props {
|
|
obligations: Obligation[];
|
|
userId?: string;
|
|
openModal?: boolean;
|
|
}
|
|
|
|
export default function ObligationList(
|
|
{ obligations, userId, openModal = false }: Props,
|
|
) {
|
|
// Theme classes are defined in styles.css with @media (prefers-color-scheme: dark)
|
|
const [popAddObligation, popupAddObligationDialog] = PopAddObligationDialog({
|
|
userId,
|
|
defaultOpen: openModal,
|
|
});
|
|
const [processedObligations, setProcessedObligations] = useState<
|
|
Obligation[]
|
|
>(obligations);
|
|
const [isProcessing, setIsProcessing] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isOpeningModal, setIsOpeningModal] = useState(openModal);
|
|
const processingRef = useRef(false);
|
|
|
|
// Process obligations on component mount and when obligations or userId change
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
const lockRoute = localStorage.getItem("lock-route");
|
|
const url = new URL(globalThis.location.href);
|
|
const currentRoute = url.pathname + url.search;
|
|
|
|
if (lockRoute && lockRoute === currentRoute) {
|
|
localStorage.removeItem("lock-route");
|
|
}
|
|
}, 100);
|
|
|
|
// Prevent concurrent processing
|
|
if (processingRef.current) {
|
|
return;
|
|
}
|
|
|
|
if (!userId) {
|
|
setProcessedObligations(obligations);
|
|
setError(null);
|
|
return;
|
|
}
|
|
|
|
const processObligations = async () => {
|
|
processingRef.current = true;
|
|
setIsProcessing(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const encryptionPassword = getEncryptionPassword(userId);
|
|
|
|
if (!encryptionPassword) {
|
|
// No encryption key available, use obligations as-is
|
|
setProcessedObligations(obligations);
|
|
return;
|
|
}
|
|
|
|
const updatedObligations: Obligation[] = [];
|
|
let hasEncryptionUpdates = false;
|
|
|
|
for (const obligation of obligations) {
|
|
const processedObligation = { ...obligation };
|
|
|
|
if (obligation.encrypted_data) {
|
|
// Try to decrypt existing encrypted data
|
|
try {
|
|
const decryptedData = await decryptDataWithStoredPassword(
|
|
userId,
|
|
obligation.encrypted_data,
|
|
);
|
|
if (decryptedData) {
|
|
const parsed = JSON.parse(decryptedData);
|
|
if (parsed.amount !== undefined) {
|
|
processedObligation.amount = parsed.amount;
|
|
}
|
|
if (parsed.description !== undefined) {
|
|
processedObligation.description = parsed.description;
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to decrypt obligation data:", error);
|
|
setError("Failed to decrypt some obligation data");
|
|
}
|
|
} else if (
|
|
obligation.amount !== null || obligation.description !== null
|
|
) {
|
|
// No encrypted data but has plaintext data - encrypt it and clear plaintext
|
|
try {
|
|
const dataToEncrypt = {
|
|
amount: obligation.amount,
|
|
description: obligation.description,
|
|
};
|
|
|
|
const encryptedData = await encryptDataWithStoredPassword(
|
|
userId,
|
|
JSON.stringify(dataToEncrypt),
|
|
);
|
|
|
|
if (encryptedData) {
|
|
// Update the obligation in the database
|
|
const response = await fetch("/api/update/obligation", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
obligation_id: obligation.id,
|
|
encrypted_data: encryptedData,
|
|
description: null, // Clear plaintext description
|
|
amount: null, // Clear plaintext amount
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
// Update local state
|
|
processedObligation.encrypted_data = encryptedData;
|
|
processedObligation.description = obligation.description; // Keep for display
|
|
processedObligation.amount = obligation.amount; // Keep for display
|
|
hasEncryptionUpdates = true;
|
|
} else {
|
|
console.error("Failed to update obligation encryption");
|
|
setError("Failed to encrypt some obligation data");
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to encrypt obligation data:", error);
|
|
setError("Failed to encrypt some obligation data");
|
|
}
|
|
}
|
|
|
|
updatedObligations.push(processedObligation);
|
|
}
|
|
|
|
setProcessedObligations(updatedObligations);
|
|
|
|
if (hasEncryptionUpdates) {
|
|
console.log("Successfully encrypted plaintext obligation data");
|
|
}
|
|
} catch (error) {
|
|
console.error("Unexpected error during obligation processing:", error);
|
|
setError("An unexpected error occurred while processing obligations");
|
|
setProcessedObligations(obligations); // Fallback to original data
|
|
} finally {
|
|
setIsProcessing(false);
|
|
processingRef.current = false;
|
|
}
|
|
};
|
|
|
|
processObligations();
|
|
|
|
// Cleanup function to handle component unmount
|
|
return () => {
|
|
processingRef.current = false;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
{popupAddObligationDialog}
|
|
<div class="flex flex-col mt-14 gap-6">
|
|
<div
|
|
style={{
|
|
position: "relative",
|
|
marginBottom: "1rem",
|
|
minHeight: "56px",
|
|
}}
|
|
>
|
|
<h2
|
|
class="theme-text"
|
|
style={{
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "5%",
|
|
fontSize: "1.5rem",
|
|
margin: 0,
|
|
}}
|
|
>
|
|
Your Obligations
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
style={{
|
|
position: "absolute",
|
|
top: "50%",
|
|
right: "5%",
|
|
backgroundColor: "#16a34a",
|
|
color: "#fff",
|
|
padding: "0.5rem 1.25rem",
|
|
borderRadius: "0.5rem",
|
|
boxShadow: "0 10px 15px -3px rgba(16, 185, 129, 0.4)",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
fontSize: "1.4rem",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
(e.currentTarget as HTMLButtonElement).style.backgroundColor =
|
|
"#15803d";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
(e.currentTarget as HTMLButtonElement).style.backgroundColor =
|
|
"#16a34a";
|
|
}}
|
|
onClick={() => {
|
|
if (isOpeningModal) return;
|
|
|
|
localStorage.setItem(
|
|
"lock-route",
|
|
"/calendar/budget-obligations?modal=on",
|
|
);
|
|
setIsOpeningModal(true);
|
|
globalThis.location.href =
|
|
"/calendar/budget-obligations?modal=on";
|
|
}}
|
|
disabled={isOpeningModal}
|
|
>
|
|
+ Add Obligation
|
|
</button>
|
|
</div>
|
|
<ul class="space-y-2">
|
|
{processedObligations.map((ob) => (
|
|
<li
|
|
key={ob.id}
|
|
class="border rounded p-4 shadow relative theme-container"
|
|
>
|
|
<form
|
|
method="POST"
|
|
action="/api/delete/obligation"
|
|
class="absolute top-1/2 right-0 transform -translate-y-1/2"
|
|
style={{ display: "inline" }}
|
|
onSubmit={(e) => {
|
|
// Set sender input to current page
|
|
const form = e.currentTarget;
|
|
form.sender.value = location.pathname;
|
|
|
|
// Add confirmation for delete
|
|
if (
|
|
!confirm(
|
|
`Are you sure you want to delete "${
|
|
ob.description || "this obligation"
|
|
}"?`,
|
|
)
|
|
) {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
}}
|
|
>
|
|
<input type="hidden" name="obligation_id" value={ob.id} />
|
|
<input
|
|
type="hidden"
|
|
name="sender"
|
|
value={typeof location !== "undefined"
|
|
? location.pathname
|
|
: ""}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
aria-label="Delete obligation"
|
|
class="theme-icon-button hover:text-red-500 transition-colors"
|
|
style={{ background: "none", border: "none", padding: 0 }}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
<div class="font-semibold text-lg theme-text">
|
|
{ob.description || ""}
|
|
</div>
|
|
<div class="text-sm theme-calendar-list-frequency">
|
|
Amount: ${ob.amount?.toFixed(2) || "0.00"}
|
|
</div>
|
|
<div class="text-sm theme-calendar-list-frequency">
|
|
Frequency: {ob.frequency}
|
|
</div>
|
|
<div class="text-sm theme-calendar-list-frequency">
|
|
Due: {ob.due_date
|
|
? MakeNewDate(ob.due_date).toISOString().split("T")[0]
|
|
: ""}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div aria-hidden="true" class="h-28"></div>
|
|
<div class="fixed bottom-4 inset-x-0 flex justify-center z-40 pointer-events-none">
|
|
<a
|
|
href={`/calendar/financial-calendar/${new Date().getFullYear()}/${
|
|
(new Date().getMonth() + 1).toString().padStart(2, "0")
|
|
}?`}
|
|
class="w-11/12 max-w-md bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-10 rounded-full shadow-lg pointer-events-auto text-center"
|
|
>
|
|
Back to Financial Calendar
|
|
</a>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|