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

@{
    ViewData["Title"] = "Customers";
}

<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">Customers</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>
                The Customers section is the starting point for all work in the shop. Every quote, job, and invoice
                belongs to a customer record. Keeping your customer list accurate and up to date ensures you can
                quickly pull up a customer's full history &mdash; all their past jobs, outstanding quotes, and unpaid
                invoices in one place.
            </p>
            <p>
                You can find Customers under <strong>Operations &rsaquo; Customers</strong> in the left sidebar.
                The list is searchable and sortable. Use the search box at the top of the list to find a customer
                by name, email, or phone number.
            </p>
        </section>

        <section id="customer-types" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-diagram-2 text-primary me-2"></i>Customer Types
            </h2>
            <p>
                When creating a customer you must choose one of two types. This affects how the customer appears
                in reports and how pricing tiers are applied.
            </p>

            <div class="row g-3">
                <div class="col-md-6">
                    <div class="card border-primary border-opacity-25 h-100">
                        <div class="card-header bg-primary bg-opacity-10 fw-semibold">
                            <i class="bi bi-building me-1"></i> Commercial
                        </div>
                        <div class="card-body">
                            <p class="card-text small mb-0">
                                Use this for businesses &mdash; auto body shops, fabricators, manufacturers, or any company
                                that sends you work regularly. Commercial customers can have a <strong>pricing tier</strong>
                                applied (e.g., volume discounts) and a <strong>credit limit</strong> set. They typically
                                have a company name in addition to a contact person.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card border-secondary border-opacity-25 h-100">
                        <div class="card-header bg-secondary bg-opacity-10 fw-semibold">
                            <i class="bi bi-person me-1"></i> Non-Commercial
                        </div>
                        <div class="card-body">
                            <p class="card-text small mb-0">
                                Use this for individuals &mdash; homeowners who bring in patio furniture, hobbyists with
                                motorcycle parts, or anyone who is not representing a business. Non-commercial customers
                                typically do not have a company name and are priced at standard retail rates.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="adding-a-customer" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-person-plus text-primary me-2"></i>Adding a Customer
            </h2>
            <p>Follow these steps to add a new customer:</p>
            <ol class="mb-3">
                <li class="mb-2">Go to <strong>Operations &rsaquo; Customers</strong> and click the <strong>New Customer</strong> button in the top-right corner.</li>
                <li class="mb-2">Choose the <strong>Customer Type</strong> &mdash; Commercial or Non-Commercial.</li>
                <li class="mb-2">
                    Fill in the customer details:
                    <ul class="mt-1">
                        <li><strong>Company Name</strong> &mdash; required for Commercial customers.</li>
                        <li><strong>Contact Name</strong> &mdash; the person you deal with day to day.</li>
                        <li><strong>Email</strong> &mdash; used for quote and invoice notifications.</li>
                        <li><strong>Phone</strong> &mdash; primary contact number.</li>
                        <li><strong>Mobile Phone</strong> &mdash; used for SMS notifications. Required if you want to text this customer.</li>
                        <li><strong>SMS Opt-In</strong> &mdash; check this only after you have obtained the customer's consent to receive text messages. Visible only when SMS is enabled for your company.</li>
                        <li><strong>Address</strong> &mdash; billing and shipping address fields.</li>
                    </ul>
                </li>
                <li class="mb-2">For Commercial customers, optionally set a <strong>Pricing Tier</strong> and <strong>Credit Limit</strong>.</li>
                <li class="mb-2">Add any <strong>Notes</strong> that your team should know about this customer (e.g., "Requires 48-hour advance notice before pickup").</li>
                <li class="mb-2">Click <strong>Save Customer</strong>.</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>
                    You can also create a customer automatically when converting an approved prospect quote. The
                    system pre-fills the customer form with the prospect's details from the quote.
                </div>
            </div>
        </section>

        <section id="editing-a-customer" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-pencil text-primary me-2"></i>Editing a Customer
            </h2>
            <p>
                To update a customer's details, find the customer in the list and click their name to open the
                Details page. Then click the <strong>Edit</strong> button (pencil icon) in the top-right corner
                of the details page.
            </p>
            <p>
                You can also click the <i class="bi bi-pencil"></i> icon directly in the customer list to jump
                straight to the edit form.
            </p>
            <p>
                All fields can be updated at any time. Changes take effect immediately and are reflected on all
                linked jobs, quotes, and invoices.
            </p>
        </section>

        <section id="customer-details" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-card-text text-primary me-2"></i>Customer Details Page
            </h2>
            <p>
                The Customer Details page is your hub for everything related to a single customer. Open it by
                clicking a customer's name anywhere in the system.
            </p>
            <p>The details page shows:</p>
            <ul>
                <li><strong>Contact information</strong> &mdash; name, email, phone, address, and lead source.</li>
                <li><strong>Account summary</strong> &mdash; current balance, credit limit, store credit, and pricing tier.</li>
                <li>
                    <strong>Ready for Pickup</strong> &mdash; if any of this customer&rsquo;s jobs are in &ldquo;Ready for Pickup&rdquo; status,
                    a highlighted card appears in the right column showing each job number and how many days it has been waiting.
                    Jobs waiting 3&ndash;6 days show in amber; 7+ days in red.
                </li>
                <li>
                    <strong>Additional Contacts</strong> &mdash; billing contacts, ops contacts, drop-off contacts, and so on.
                    See the Additional Contacts section below.
                </li>
                <li>
                    <strong>Internal Notes</strong> &mdash; private notes added by your staff (not visible to the customer).
                    Notes can be marked as important <span class="text-warning">&#9733;</span> to highlight them for the team.
                </li>
                <li>
                    <strong>Preferred Powders</strong> &mdash; inventory items this customer frequently uses. Staff can
                    search and add powders here so that anyone creating a quote or job for this customer can quickly
                    see which colors they prefer. See the Preferred Powders section below.
                </li>
                <li>
                    <strong>Jobs tab</strong> &mdash; every job created for this customer, with status and date. Click
                    a job number to open it.
                </li>
                <li>
                    <strong>Quotes tab</strong> &mdash; all quotes sent to this customer, including pending and
                    historical quotes. Click a quote number to open it.
                </li>
                <li>
                    <strong>Invoices tab</strong> &mdash; all invoices with payment status. Quickly see who owes money
                    and how much.
                </li>
                <li>
                    <strong>Deposits tab</strong> &mdash; all deposits recorded for this customer across any job or quote.
                </li>
                <li><strong>Recent Activity</strong> &mdash; a combined timeline of the last 15 events (jobs, quotes, invoices, deposits) in reverse chronological order.</li>
            </ul>
        </section>

        <section id="credit-limit" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-credit-card text-primary me-2"></i>Credit Limit
            </h2>
            <p>
                The credit limit is the maximum amount of unpaid invoices a commercial customer is allowed to carry
                at one time. It is set on the customer record and displayed on the Customer Details page alongside
                their current outstanding balance.
            </p>
            <p>
                When a customer's outstanding balance approaches or exceeds their credit limit, the system displays
                a warning flag on their record and on any new jobs or invoices you try to create for them. This is
                a visual warning only &mdash; the system does not automatically block new work &mdash; but it gives your team
                a clear signal to follow up on payment before starting more jobs.
            </p>
            <p>
                If you do not want to set a credit limit, leave the field at <strong>0</strong> (the default), which
                means no limit is enforced.
            </p>
        </section>

        <section id="tax-exempt" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-patch-check text-primary me-2"></i>Tax Exempt Customers
            </h2>
            <p>
                If a customer is tax exempt (e.g., a non-profit or a reseller with a valid exemption certificate),
                check the <strong>Tax Exempt</strong> box on their customer record. You can also upload their
                exemption certificate as an attachment for your records.
            </p>
            <p>
                When a tax-exempt customer is selected on a new quote or invoice, the tax rate automatically
                defaults to <strong>0%</strong> &mdash; no manual adjustment needed. Tax-exempt customers are marked
                with a ★ in the customer dropdown when creating quotes and invoices so your team can spot them
                at a glance.
            </p>
        </section>

        <section id="additional-contacts" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-people text-primary me-2"></i>Additional Contacts
            </h2>
            <p>
                Commercial customers often have more than one person involved in their account &mdash; a purchasing
                manager, a billing contact, or the person who actually drops off and picks up parts. The
                <strong>Additional Contacts</strong> section on the Customer Details page lets you store all of
                them in one place so your team always knows who to call.
            </p>
            <p>To add a contact, open the Customer Details page and click <strong>Add Contact</strong> in the
            Additional Contacts card. You can record:</p>
            <ul class="mb-3">
                <li><strong>Name</strong> &mdash; first and last name.</li>
                <li><strong>Job Title</strong> &mdash; their role at the company (e.g., &ldquo;Purchasing Manager&rdquo;).</li>
                <li><strong>Role</strong> &mdash; a category tag: Billing, Operations, Drop-Off, Sales, General, or Other.</li>
                <li><strong>Email &amp; Phone</strong> &mdash; their direct contact details.</li>
                <li><strong>Notes</strong> &mdash; anything else your team should know about this person.</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>
                    <strong>Notifications always go to the primary contact.</strong> Additional contacts are for
                    staff reference only. All automated emails (job ready for pickup, invoice sent, quote
                    approval links, etc.) and SMS messages are sent to the email address and phone number on the
                    main customer record &mdash; not to the contacts listed here. If you need invoices routed to a
                    different address, use the <strong>Billing / Accounting Email</strong> field on the main
                    customer record instead.
                </div>
            </div>
        </section>

        <section id="ship-to-address" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-truck text-primary me-2"></i>Ship-To / Pickup Address
            </h2>
            <p>
                Some customers have a different address for pickups or deliveries than their billing address. You
                can record a separate <strong>Ship-To</strong> address on the Create or Edit form. Leave it blank
                if the customer picks up from the same address they bill from.
            </p>
            <p>
                When a ship-to address is on file, the Customer Details page splits the Address card into two
                columns &mdash; billing on the left, ship-to on the right &mdash; so the difference is immediately visible
                to anyone looking up the customer.
            </p>
        </section>

        <section id="lead-source" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-signpost text-primary me-2"></i>Lead Source
            </h2>
            <p>
                The <strong>Lead Source</strong> field lets you record how a customer found your shop. Options
                include Walk-In, Google Search, Customer Referral, Social Media, Website, Repeat Customer, Trade
                Show / Event, Flyer / Print Ad, and Other.
            </p>
            <p>
                This field is optional and is shown on the Customer Details page under Business Information. It
                is useful for understanding which marketing channels are bringing in customers over time.
            </p>
        </section>

        <section id="preferred-powders" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-droplet-half text-primary me-2"></i>Preferred Powders
            </h2>
            <p>
                The <strong>Preferred Powders</strong> card on the Customer Details page lets you tag inventory
                items that this customer regularly orders. It is a staff-reference tool &mdash; it does not auto-select
                powders on quotes or jobs, but it gives anyone creating a quote a quick look at what colors this
                customer has used before.
            </p>
            <p>To add a preferred powder:</p>
            <ol class="mb-3">
                <li class="mb-1">Open the Customer Details page.</li>
                <li class="mb-1">In the <strong>Preferred Powders</strong> card, type part of the powder name or SKU into the search box.</li>
                <li class="mb-1">Select the item from the dropdown and click <strong>Add</strong>.</li>
            </ol>
            <p>To remove a preferred powder, click the <strong>&times;</strong> button next to the item in the list.</p>
            <div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
                <i class="bi bi-info-circle-fill flex-shrink-0 mt-1"></i>
                <div>
                    Only items that already exist in your <strong>Inventory</strong> can be added as preferred powders.
                    If a color isn&rsquo;t appearing in the search, check that it has been added to inventory first.
                </div>
            </div>
        </section>

        <section id="outstanding-pickups" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-box-seam text-primary me-2"></i>Outstanding Pickups
            </h2>
            <p>
                When one or more of a customer&rsquo;s jobs are in <strong>Ready for Pickup</strong> status, a
                highlighted card appears in the right column of their Customer Details page. This lets your front desk
                staff immediately see &mdash; without opening the Jobs list &mdash; whether a customer calling or walking
                in has finished work waiting for them.
            </p>
            <p>The card shows:</p>
            <ul class="mb-3">
                <li>The job number (clickable, opens the Job Details page).</li>
                <li>How many days the job has been waiting in &ldquo;Ready for Pickup&rdquo; status.</li>
            </ul>
            <p>Color coding helps prioritize follow-up calls:</p>
            <ul class="mb-3">
                <li><span class="badge bg-warning text-dark">Amber</span> &mdash; waiting 3&ndash;6 days.</li>
                <li><span class="badge bg-danger">Red</span> &mdash; waiting 7 or more days.</li>
                <li>No color &mdash; waiting 0&ndash;2 days (recently completed).</li>
            </ul>
            <p>
                The card disappears automatically once all jobs for this customer have moved out of
                &ldquo;Ready for Pickup&rdquo; status (e.g., to Delivered).
            </p>
        </section>

        <section id="deactivating-a-customer" class="mb-5">
            <h2 class="h4 fw-bold border-bottom pb-2 mb-3">
                <i class="bi bi-person-dash text-primary me-2"></i>Deactivating a Customer
            </h2>
            <p>
                If a customer no longer does business with you, you can deactivate them rather than deleting them
                outright. Deactivating keeps all their historical jobs, quotes, and invoices intact for your records,
                but removes them from the active customer list so they do not clutter your search results.
            </p>
            <p>To deactivate a customer:</p>
            <ol class="mb-3">
                <li class="mb-1">Open the customer's Details page.</li>
                <li class="mb-1">Click the <strong>Delete</strong> (or Deactivate) button.</li>
                <li class="mb-1">Confirm the action in the dialog that appears.</li>
            </ol>
            <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>
                    <strong>Note:</strong> Deactivation is a "soft delete." The customer's record and all linked data
                    are preserved in the database and visible to Administrators. The customer simply no longer appears
                    in standard searches and lists. Contact your administrator if you need a record fully restored.
                </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="#customer-types">Customer Types</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#adding-a-customer">Adding a Customer</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#editing-a-customer">Editing a Customer</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#customer-details">Customer Details Page</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#credit-limit">Credit Limit</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#tax-exempt">Tax Exempt</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#additional-contacts">Additional Contacts</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#ship-to-address">Ship-To Address</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#lead-source">Lead Source</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#preferred-powders">Preferred Powders</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#outstanding-pickups">Outstanding Pickups</a>
                    <a class="nav-link py-1 px-3 small text-body" href="#deactivating-a-customer">Deactivating a Customer</a>
                </nav>
            </div>
        </div>
    </div>
</div>