PowderCoatingLogix/src/PowderCoating.Web/Views/Help/AccountsPayable.cshtml

@{
    ViewData["Title"] = "Accounts Payable";
}

<div class="d-flex align-items-center gap-2 mb-3">
    <a asp-controller="Help" asp-action="Index" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left"></i></a>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a asp-controller="Help" asp-action="Index">Help</a></li>
            <li class="breadcrumb-item active">Accounts Payable</li>
        </ol>
    </nav>
</div>

<div class="row g-4">
    <div class="col-lg-9">

        <section id="overview" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-info-circle text-primary me-2"></i>Overview
            </h2>
            <p>
                Accounts Payable (AP) tracks money your shop owes to vendors. When you receive a vendor invoice
                for supplies, services, or equipment, you record it in the system as a <strong>bill</strong>.
                The system tracks each bill's status, due date, and outstanding balance so you always know what
                you owe and when it is due.
            </p>
            <p>
                When you make a payment to a vendor, you record it against the bill and the balance reduces.
                This gives you a clear, real-time picture of your upcoming financial obligations and helps you
                avoid late payments &mdash; and the late fees or strained vendor relationships that come with them.
            </p>
            <p>
                Bills can be created manually or generated automatically from a received Purchase Order.
                Creating bills from POs saves time and eliminates the risk of data entry errors. You can find
                Accounts Payable under <strong>Accounting &rsaquo; Bills</strong> in the left sidebar.
            </p>
        </section>

        <section id="creating-a-bill" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-plus-circle text-primary me-2"></i>Creating a Bill
            </h2>

            <h3 class="h6 fw-semibold mt-3 mb-2">From a Purchase Order (recommended)</h3>
            <p>
                The fastest and most accurate way to create a bill is from a received Purchase Order. Open the
                received PO and click <strong>Create Bill</strong>. The system generates a bill pre-filled with
                all line items, quantities, and prices from the PO &mdash; linked to the vendor and expense accounts
                automatically. See the <a asp-controller="Help" asp-action="PurchaseOrders">Purchase Orders help page</a>
                for step-by-step instructions.
            </p>

            <h3 class="h6 fw-semibold mt-3 mb-2">Manually</h3>
            <p>
                To create a bill that is not linked to a PO &mdash; for example, a utility bill, a service invoice,
                or a vendor charge that arrived without a matching order:
            </p>
            <ol class="mb-3">
                <li class="mb-2">Go to <strong>Accounting &rsaquo; Bills</strong> and click <strong>New Bill</strong>.</li>
                <li class="mb-2">Select the <strong>Vendor</strong>. The vendor's default expense account and payment terms are applied automatically.</li>
                <li class="mb-2">Enter the <strong>Bill Date</strong> (the date on the vendor's invoice) and the <strong>Due Date</strong> (calculated from payment terms, but you can override it).</li>
                <li class="mb-2">Enter the vendor's own <strong>Reference Number</strong> (their invoice number) so you can cross-reference it if the vendor contacts you.</li>
                <li class="mb-2">
                    Add one or more <strong>line items</strong>:
                    <ul class="mt-1">
                        <li><strong>Expense Account</strong> &mdash; the accounting category this cost belongs to (e.g., Cost of Goods Sold, Shop Supplies, Equipment Maintenance).</li>
                        <li><strong>Description</strong> &mdash; a brief note about what this line covers.</li>
                        <li><strong>Quantity</strong> and <strong>Unit Price</strong>.</li>
                    </ul>
                </li>
                <li class="mb-2">Add any internal <strong>Notes</strong>.</li>
                <li class="mb-2">Click <strong>Save Bill</strong>. The bill is saved as a Draft.</li>
            </ol>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    Draft bills are not yet in your AP ledger. They do not affect your reported AP balance until
                    you mark them as <strong>Open</strong>. This gives you time to review and verify a bill before
                    it becomes an official obligation.
                </div>
            </div>
        </section>

        <section id="bill-statuses" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-tag text-primary me-2"></i>Bill Statuses
            </h2>
            <p>
                Bills move through the following statuses as they are processed and paid.
            </p>

            <div class="table-responsive">
                <table class="table table-sm table-bordered mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width:25%">Status</th>
                            <th>What it means</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><span class="badge bg-secondary">Draft</span></td>
                            <td>The bill has been entered but not yet verified or posted. It is not in the AP ledger and does not affect your reported AP balance. Can be edited freely.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-warning text-dark">Open</span></td>
                            <td>The bill has been verified, posted to the AP ledger, and the balance is officially owed to the vendor. Appears in your AP balance and aging reports.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-info text-dark">Partially Paid</span></td>
                            <td>At least one payment has been recorded against the bill but the full balance has not been settled.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-success">Paid</span></td>
                            <td>The full bill amount has been paid. The balance is zero and the bill is closed.</td>
                        </tr>
                        <tr>
                            <td><span class="badge bg-secondary">Voided</span></td>
                            <td>The bill was cancelled before payment. Voided bills are kept for record-keeping but do not affect your AP balance.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <section id="marking-open" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-check-circle text-primary me-2"></i>Marking a Bill as Open
            </h2>
            <p>
                When you have verified that a bill is accurate &mdash; it matches the goods you received and the
                prices you agreed on &mdash; you mark it as Open to post it to your AP ledger.
            </p>
            <ol class="mb-3">
                <li class="mb-2">Open the Draft bill from <strong>Accounting &rsaquo; Bills</strong>.</li>
                <li class="mb-2">Review all line items, the vendor reference number, the bill date, and the due date.</li>
                <li class="mb-2">Click <strong>Mark as Open</strong>.</li>
                <li class="mb-2">The bill status changes to Open and the balance is now included in your total AP balance.</li>
            </ol>
            <p>
                From an accounting perspective, marking a bill as Open records the following entries:
            </p>
            <ul class="mb-3">
                <li>Debits the expense account(s) specified on the bill lines (e.g., Cost of Goods Sold)</li>
                <li>Credits Accounts Payable for the total amount owed</li>
            </ul>
            <div class="alert alert-permanent alert-warning d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
                <div>
                    Once a bill is marked as Open, its line items are locked for editing. If you discover an
                    error after marking Open, contact your bookkeeper before making any adjustments. Incorrect
                    changes can affect your financial statements.
                </div>
            </div>
        </section>

        <section id="recording-payments" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-cash-coin text-primary me-2"></i>Recording a Payment
            </h2>
            <p>
                When you pay a vendor &mdash; whether in full or as a partial payment &mdash; you record the payment against
                the open bill. The system supports multiple partial payments on a single bill.
            </p>
            <ol class="mb-3">
                <li class="mb-2">Open the Open or Partially Paid bill from <strong>Accounting &rsaquo; Bills</strong>.</li>
                <li class="mb-2">Click <strong>Record Payment</strong>.</li>
                <li class="mb-2">
                    Enter the payment details:
                    <ul class="mt-1">
                        <li><strong>Amount</strong> &mdash; how much you are paying now. Can be less than the full balance for partial payments.</li>
                        <li><strong>Payment Method</strong> &mdash; Check, ACH / Bank Transfer, Credit Card, Cash, or Wire Transfer.</li>
                        <li><strong>Payment Date</strong> &mdash; the date the payment was made or will be made.</li>
                        <li><strong>Reference Number</strong> &mdash; check number, wire confirmation, or ACH batch ID. Always fill this in for non-cash payments to simplify reconciliation.</li>
                        <li><strong>Notes</strong> &mdash; any additional information about this payment.</li>
                    </ul>
                </li>
                <li class="mb-2">Click <strong>Save Payment</strong>.</li>
            </ol>
            <p>
                The bill status updates automatically to <strong>Partially Paid</strong> if a balance remains,
                or <strong>Paid</strong> if the full amount has been settled. From an accounting perspective,
                paying a bill debits Accounts Payable and credits your bank or cash account for the amount paid.
            </p>
        </section>

        <section id="ai-receipt-scanning" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-robot text-primary me-2"></i>AI Receipt Scanning
            </h2>
            <p>
                Instead of manually entering a vendor bill, you can upload a photo or PDF of the vendor's
                paper invoice and let AI extract the details automatically.
            </p>
            <ol class="mb-3">
                <li class="mb-2">Go to <strong>Accounting &rsaquo; Bills</strong> and click <strong>Scan Receipt</strong>.</li>
                <li class="mb-2">Upload a photo (JPG/PNG) or a PDF of the vendor's invoice.</li>
                <li class="mb-2">The AI reads the document and pre-fills the vendor, bill date, line items, and amounts into a new draft bill.</li>
                <li class="mb-2">Review the extracted data &mdash; correct any fields that were misread &mdash; and save the bill.</li>
            </ol>
            <p>
                The uploaded file is automatically attached to the bill so you always have the original
                document on record.
            </p>
            <div class="alert alert-permanent alert-secondary d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-info-circle flex-shrink-0 mt-1"></i>
                <div>
                    AI extraction accuracy depends on image quality. For best results, use a well-lit photo
                    with the full invoice visible and no obstructions. Always review the extracted values
                    before saving.
                </div>
            </div>
        </section>

        <section id="smart-account-categorization" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-tags text-primary me-2"></i>Smart Account Categorization
            </h2>
            <p>
                When entering line items on a bill, the system can suggest the correct expense account for
                each line based on the description. After you type or paste a line description and move to
                the next field, AI analyzes the text and suggests the most likely account (e.g., "powder
                coating materials" → Cost of Goods Sold).
            </p>
            <p>
                You can accept the suggestion or override it with any account from your chart of accounts.
                Suggestions are non-binding and do not change anything until you save the bill.
            </p>
        </section>

        <section id="recurring-detection" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-arrow-repeat text-primary me-2"></i>Recurring Bill Detection
            </h2>
            <p>
                The <strong>Detect Recurring Bills</strong> tool is accessible from the Bills list via the
                button in the top-left of the page, or directly at
                <a asp-controller="Bills" asp-action="RecurringDetection">/Bills/RecurringDetection</a>.
                Click <strong>"Detect Recurring Bills"</strong> and Claude analyzes the last 12 months of your
                bill history to find vendors you pay on a regular schedule.
            </p>
            <p>
                Each detected pattern is shown as a card with:
            </p>
            <ul class="mb-3">
                <li class="mb-1"><strong>Vendor name</strong> and detected frequency (monthly, quarterly, biannual, annual).</li>
                <li class="mb-1"><strong>Typical amount</strong> &mdash; the usual charge from that vendor.</li>
                <li class="mb-1"><strong>Next expected date</strong> &mdash; Claude's estimate of when the next bill is likely to arrive.</li>
                <li class="mb-1"><strong>Confidence badge</strong> &mdash; High (4+ consistent occurrences), Medium (2&ndash;3 occurrences or variable timing), Low (weak pattern, worth monitoring).</li>
                <li class="mb-1"><strong>Suggested action</strong> &mdash; for example, "Set a monthly reminder for this bill."</li>
            </ul>
            <p>
                This is useful for cash flow planning &mdash; knowing that a $1,200 electricity bill arrives on the
                15th every month, or that your insurance renews every January, lets you reserve funds in advance
                and avoid surprises. High-confidence patterns are reliable enough to act on; Low-confidence
                patterns are worth keeping an eye on but should not be treated as certain.
            </p>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-lightbulb-fill flex-shrink-0 mt-1"></i>
                <div>
                    Recurring bill detection requires at least 2 occurrences of a vendor bill at a similar
                    interval to detect a pattern. Shops with less than 2 months of history will see few or no
                    results. The scan covers bills only &mdash; direct expenses are not included.
                </div>
            </div>
        </section>

        <section id="expense-accounts" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-folder2-open text-primary me-2"></i>Expense Accounts
            </h2>
            <p>
                Each line item on a bill must be assigned to an <strong>expense account</strong> &mdash; an accounting
                category that determines where the cost appears in your financial reports. Common expense accounts
                used in a powder coating shop include:
            </p>
            <ul class="mb-3">
                <li class="mb-1"><strong>Cost of Goods Sold (COGS)</strong> &mdash; raw materials, powder coatings, and consumables that go directly into jobs.</li>
                <li class="mb-1"><strong>Shop Supplies</strong> &mdash; items used in the shop that are not directly tied to a specific job (masking tape, gloves, cleaning solvents).</li>
                <li class="mb-1"><strong>Equipment Maintenance</strong> &mdash; service, repairs, and parts for your oven, sandblaster, and coating booths.</li>
                <li class="mb-1"><strong>Utilities</strong> &mdash; gas, electricity, and water bills that power the shop.</li>
                <li class="mb-1"><strong>Rent / Occupancy</strong> &mdash; monthly rent or lease payments for your shop premises.</li>
                <li class="mb-1"><strong>Operating Expenses</strong> &mdash; general overhead that does not fit another specific category.</li>
            </ul>
            <p>
                The <strong>vendor's default expense account</strong> is set on the vendor record and pre-fills
                each new bill line automatically. For example, if your powder supplier is linked to COGS, every
                bill line from that vendor starts with COGS selected. You can override the account on any
                individual line item as needed.
            </p>
            <div class="alert alert-permanent alert-secondary d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-info-circle flex-shrink-0 mt-1"></i>
                <div>
                    Expense accounts are defined in <strong>Settings &rsaquo; Chart of Accounts</strong>.
                    If you are unsure which account to use for a particular cost, ask your accountant or
                    bookkeeper before posting the bill. Using the wrong account affects your Profit &amp; Loss
                    report and can complicate your year-end. See the
                    <a asp-controller="Help" asp-action="Settings">Settings help page</a> for information
                    on managing your chart of accounts.
                </div>
            </div>
        </section>

    </div>

    <div class="col-lg-3 d-none d-lg-block">
        @{ await Html.RenderPartialAsync("_HelpNav"); }
        <div class="card border-0 shadow-sm sticky-top" style="top:80px">
            <div class="card-header bg-transparent fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em; font-size:.7rem;">On this page</div>
            <div class="card-body p-0">
                <nav class="nav flex-column">
                    <a class="nav-link py-1 px-3 small text-body" href="#overview">Overview</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#creating-a-bill">Creating a Bill</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#bill-statuses">Bill Statuses</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#marking-open">Marking a Bill as Open</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#recording-payments">Recording a Payment</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#ai-receipt-scanning">AI Receipt Scanning</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#smart-account-categorization">Smart Categorization</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#expense-accounts">Expense Accounts</a>
                </nav>
            </div>
        </div>
    </div>
</div>