Preview
Code

import { useState } from ‘react’;
import { PlusCircle, Save, Download, Trash } from ‘lucide-react’;

const CreditTracker = () => {
const [vendorAccounts, setVendorAccounts] = useState([
{
vendorName: ‘Uline’,
creditLimit: 2000,
dueDate: ‘2024-12-15’,
amountOwed: 450.75,
paymentDate: ‘2024-12-12’,
paymentAmount: 450.75,
paymentStatus: ‘Paid Early’
}
]);

const [creditCards, setCreditCards] = useState([
{
cardName: ‘Amex Business’,
creditLimit: 5000,
dueDate: ‘2024-12-17’,
balance: 1250.00,
paymentDate: ‘2024-12-15’,
paymentAmount: 1250.00,
paymentStatus: ‘Paid Early’
}
]);

const [creditScores, setCreditScores] = useState([
{
bureau: ‘Dun & Bradstreet’,
score: 82,
date: ‘2024-12-01’,
change: 3
}
]);

const [notes, setNotes] = useState(”);

const addVendorAccount = () => {
setVendorAccounts([…vendorAccounts, {
vendorName: ”,
creditLimit: 0,
dueDate: ”,
amountOwed: 0,
paymentDate: ”,
paymentAmount: 0,
paymentStatus: ”
}]);
};

const addCreditCard = () => {
setCreditCards([…creditCards, {
cardName: ”,
creditLimit: 0,
dueDate: ”,
balance: 0,
paymentDate: ”,
paymentAmount: 0,
paymentStatus: ”
}]);
};

return (

Business Credit Tracker


{/* Vendor Accounts Section */}

Vendor Accounts

{vendorAccounts.map((account, index) => (

))}

Vendor Name Credit Limit Due Date Amount Owed Payment Date Payment Amount Status Actions

{/* Credit Scores Section */}

Credit Scores

{creditScores.map((score, index) => (

{score.bureau}

{score.score}
0 ? ‘text-green-500’ : ‘text-red-500’}`}>
{score.change > 0 ? ‘+’ : ”}{score.change} points
Last updated: {score.date}

))}

{/* Notes Section */}

Notes