{"id":2601,"date":"2026-04-28T20:17:41","date_gmt":"2026-04-28T20:17:41","guid":{"rendered":"https:\/\/thepvtimes.synology.me\/index.php\/client-portal-2\/"},"modified":"2026-04-28T20:17:41","modified_gmt":"2026-04-28T20:17:41","slug":"client-portal-2","status":"publish","type":"page","link":"https:\/\/times509.com\/index.php\/client-portal-2\/","title":{"rendered":"Client Portal"},"content":{"rendered":"\n<div class=\"easy-invoice-client-dashboard\">\n                            <!-- Login Form --><\/p>\n<div class=\"easy-invoice-login-section\">\n<div class=\"login-container\">\n<h2>Client Login<\/h2>\n<p class=\"login-description\">Access your invoices and quotes<\/p>\n<form id=\"easy-invoice-client-login-form\" class=\"login-form\">\n                            <input type=\"hidden\" id=\"client_login_nonce\" name=\"client_login_nonce\" value=\"da0b54ebf5\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php\/wp-json\/wp\/v2\/pages\/2601\" \/>                            <\/p>\n<div class=\"form-group\">\n                                <label for=\"login_email\">Email or Username:<\/label><br \/>\n                                <input type=\"text\" id=\"login_email\" name=\"email_or_username\" required>\n                            <\/div>\n<div class=\"form-group\">\n                                <label for=\"login_password\">Password<\/label><br \/>\n                                <input type=\"password\" id=\"login_password\" name=\"password\" required>\n                            <\/div>\n<div class=\"form-group\">\n                                <button type=\"submit\" class=\"login-btn\">Login<\/button>\n                            <\/div>\n<\/p><\/form>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<style>\n        \/* Document Info Styling *\/\n        .document-info {\n            display: flex;\n            flex-direction: column;\n            gap: 4px;\n        }<\/p>\n<p>        .document-title {\n            font-weight: 500;\n            color: #333;\n            font-size: 14px;\n            line-height: 1.3;\n        }<\/p>\n<p>        .document-number {\n            font-size: 12px;\n            color: #666;\n            font-weight: 400;\n        }<\/p>\n<p>        \/* Button Styling - Modern Design *\/\n        .button, .login-btn, .logout-btn, .edit-profile-btn, .save-profile-btn, \n        .cancel-edit-btn, .view-doc-btn, .action-btn {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n            padding: 12px 20px;\n            border: 1px solid transparent;\n            border-radius: 8px;\n            font-size: 14px;\n            font-weight: 600;\n            text-decoration: none;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            position: relative;\n            overflow: hidden;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n            min-height: 44px;\n        }<\/p>\n<p>        .button:hover, .login-btn:hover, .logout-btn:hover, .edit-profile-btn:hover,\n        .save-profile-btn:hover, .view-doc-btn:hover, .action-btn:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n            text-decoration: none;\n        }<\/p>\n<p>        .button:active, .login-btn:active, .logout-btn:active, .edit-profile-btn:active,\n        .save-profile-btn:active, .view-doc-btn:active, .action-btn:active {\n            transform: translateY(0);\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n        }<\/p>\n<p>        \/* Primary Buttons *\/\n        .button, .login-btn, .save-profile-btn {\n            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n            color: #ffffff;\n            border-color: #3b82f6;\n        }<\/p>\n<p>        .button:hover, .login-btn:hover, .save-profile-btn:hover {\n            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);\n            border-color: #2563eb;\n            color: #ffffff;\n        }<\/p>\n<p>        \/* Secondary Buttons *\/\n        .edit-profile-btn, .cancel-edit-btn, .view-doc-btn {\n            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n            color: #374151;\n            border-color: #e2e8f0;\n        }<\/p>\n<p>        .edit-profile-btn:hover, .cancel-edit-btn:hover, .view-doc-btn:hover {\n            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);\n            border-color: #cbd5e1;\n            color: #1e293b;\n        }<\/p>\n<p>        \/* View Document Button - Smaller Size *\/\n        .view-doc-btn {\n            padding: 6px 12px !important;\n            font-size: 11px !important;\n            min-height: 28px !important;\n            border-radius: 6px !important;\n        }<\/p>\n<p>        \/* Danger Buttons *\/\n        .logout-btn, .delete-account-btn {\n            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n            color: #ffffff;\n            border-color: #ef4444;\n        }<\/p>\n<p>        .logout-btn:hover, .delete-account-btn:hover {\n            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n            border-color: #dc2626;\n            color: #ffffff;\n        }<\/p>\n<p>        \/* Action Buttons *\/\n        .action-btn {\n            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\n            color: #ffffff;\n            border-color: #8b5cf6;\n            width: 100%;\n            margin-bottom: 12px;\n        }<\/p>\n<p>        .action-btn:hover {\n            background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);\n            border-color: #7c3aed;\n            color: #ffffff;\n        }<\/p>\n<p>        .action-btn.export-data-btn {\n            background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n            border-color: #10b981;\n        }<\/p>\n<p>        .action-btn.export-data-btn:hover {\n            background: linear-gradient(135deg, #059669 0%, #047857 100%);\n            border-color: #059669;\n        }<\/p>\n<p>        .action-btn.change-password-btn {\n            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n            border-color: #f59e0b;\n        }<\/p>\n<p>        .action-btn.change-password-btn:hover {\n            background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\n            border-color: #d97706;\n        }<\/p>\n<p>        .action-btn.delete-account-btn {\n            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n            border-color: #ef4444;\n        }<\/p>\n<p>        .action-btn.delete-account-btn:hover {\n            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\n            border-color: #dc2626;\n        }<\/p>\n<p>        \/* Small Button Variants *\/\n        .action-btn.small {\n            padding: 8px 12px;\n            font-size: 0.85rem;\n            min-height: auto;\n            margin-bottom: 8px;\n        }<\/p>\n<p>        .action-btn.small svg {\n            width: 14px;\n            height: 14px;\n        }<\/p>\n<p>        \/* Inline Actions Layout *\/\n        .account-actions-inline {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 10px;\n            align-items: center;\n        }<\/p>\n<p>        .account-actions-inline .action-btn.small {\n            margin-bottom: 0;\n        }<\/p>\n<p>        \/* Tab Navigation Buttons *\/\n        .tab-nav-btn {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 12px 16px;\n            background: transparent;\n            border: 1px solid transparent;\n            border-radius: 8px;\n            color: #6b7280;\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            text-decoration: none;\n        }<\/p>\n<p>        .tab-nav-btn:hover {\n            background: #f3f4f6;\n            color: #374151;\n            transform: translateY(-1px);\n        }<\/p>\n<p>        .tab-nav-btn.active {\n            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n            color: #ffffff;\n            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);\n        }<\/p>\n<p>        .tab-nav-btn.active:hover {\n            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);\n            color: #ffffff;\n        }<\/p>\n<p>        \/* Button Icons *\/\n        .button svg, .login-btn svg, .logout-btn svg, .edit-profile-btn svg,\n        .save-profile-btn svg, .cancel-edit-btn svg, .view-doc-btn svg, .action-btn svg,\n        .tab-nav-btn svg {\n            width: 16px;\n            height: 16px;\n            flex-shrink: 0;\n        }<\/p>\n<p>        \/* Disabled State *\/\n        .button:disabled, .login-btn:disabled, .logout-btn:disabled, .edit-profile-btn:disabled,\n        .save-profile-btn:disabled, .cancel-edit-btn:disabled, .view-doc-btn:disabled, .action-btn:disabled {\n            opacity: 0.6;\n            cursor: not-allowed;\n            transform: none !important;\n            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;\n        }<\/p>\n<p>        \/* Table Styling *\/\n        .documents-table {\n            width: 100%;\n            border-collapse: collapse;\n            margin-top: 20px;\n        }<\/p>\n<p>        .documents-table th {\n            background: #f8fafc;\n            padding: 12px 16px;\n            text-align: left;\n            font-weight: 600;\n            color: #374151;\n            border-bottom: 2px solid #e5e7eb;\n            font-size: 13px;\n        }<\/p>\n<p>        .documents-table td {\n            padding: 12px 16px;\n            border-bottom: 1px solid #f3f4f6;\n            vertical-align: middle;\n        }<\/p>\n<p>        .documents-table .document-total {\n            font-size: 13px !important;\n            font-weight: 600 !important;\n            color: #1f2937 !important;\n        }<\/p>\n<p>        .documents-table .document-total strong {\n            font-size: 13px !important;\n            font-weight: 600 !important;\n            color: #1f2937 !important;\n        }<\/p>\n<p>        \/* Status Badge Styling *\/\n        .status-badge {\n            display: inline-flex;\n            align-items: center;\n            padding: 4px 8px;\n            border-radius: 6px;\n            font-size: 11px;\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n        }<\/p>\n<p>        .status-badge.status-draft {\n            background: #f3f4f6;\n            color: #6b7280;\n        }<\/p>\n<p>        .status-badge.status-sent {\n            background: #dbeafe;\n            color: #1d4ed8;\n        }<\/p>\n<p>        .status-badge.status-paid {\n            background: #dcfce7;\n            color: #166534;\n        }<\/p>\n<p>        .status-badge.status-overdue {\n            background: #fef3c7;\n            color: #92400e;\n        }<\/p>\n<p>        .status-badge.status-accepted {\n            background: #dcfce7;\n            color: #166534;\n        }<\/p>\n<p>        .status-badge.status-declined {\n            background: #fee2e2;\n            color: #dc2626;\n        }<\/p>\n<p>        \/* Responsive Design *\/\n        @media (max-width: 768px) {\n            .button, .login-btn, .logout-btn, .edit-profile-btn, .save-profile-btn,\n            .cancel-edit-btn, .view-doc-btn, .action-btn {\n                padding: 10px 16px;\n                font-size: 13px;\n                min-height: 40px;\n            }<\/p>\n<p>            .tab-nav-btn {\n                padding: 10px 12px;\n                font-size: 13px;\n            }<\/p>\n<p>            .documents-table th,\n            .documents-table td {\n                padding: 8px 12px;\n                font-size: 12px;\n            }<\/p>\n<p>            .documents-table .document-total,\n            .documents-table .document-total strong {\n                font-size: 12px !important;\n            }\n        }<\/p>\n<p>        \/* Payments Table Styling *\/\n        .payments-table {\n            width: 100%;\n            border-collapse: collapse;\n            margin-top: 20px;\n        }<\/p>\n<p>        .payments-table th {\n            background: #f8fafc;\n            padding: 12px 16px;\n            text-align: left;\n            font-weight: 600;\n            color: #374151;\n            border-bottom: 1px solid #e5e7eb;\n            font-size: 13px;\n        }<\/p>\n<p>        .payments-table td {\n            padding: 12px 16px;\n            border-bottom: 1px solid #f3f4f6;\n            vertical-align: middle;\n        }<\/p>\n<p>        .payments-table .payment-amount {\n            font-size: 13px !important;\n            font-weight: 600 !important;\n            color: #1f2937 !important;\n        }<\/p>\n<p>        .payments-table .payment-amount strong {\n            font-size: 13px !important;\n            font-weight: 600 !important;\n            color: #1f2937 !important;\n        }<\/p>\n<p>        .invoice-info {\n            line-height: 1.4;\n        }<\/p>\n<p>        .invoice-number {\n            font-weight: 600;\n            color: #1f2937;\n        }<\/p>\n<p>        .invoice-title {\n            font-size: 12px;\n            color: #6b7280;\n            margin-top: 2px;\n        }<\/p>\n<p>        .view-receipt-btn {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 6px 12px;\n            background: #10b981;\n            color: white;\n            text-decoration: none;\n            border-radius: 4px;\n            font-size: 12px;\n            font-weight: 500;\n            transition: background-color 0.2s;\n        }<\/p>\n<p>        .view-receipt-btn:hover {\n            background: #059669;\n        }<\/p>\n<p>        .empty-state {\n            text-align: center;\n            padding: 60px 20px;\n        }<\/p>\n<p>        .empty-state svg {\n            margin-bottom: 20px;\n        }<\/p>\n<p>        .empty-state h4 {\n            margin-bottom: 10px;\n            font-size: 18px;\n            color: #1f2937;\n        }<\/p>\n<p>        .empty-state p {\n            color: #6b7280;\n            line-height: 1.6;\n            max-width: 400px;\n            margin: 0 auto;\n        }<\/p>\n<p>        \/* Payment Status Badges *\/\n        .status-badge.status-completed {\n            background: #dcfce7;\n            color: #166534;\n        }<\/p>\n<p>        .status-badge.status-pending {\n            background: #fef3c7;\n            color: #92400e;\n        }<\/p>\n<p>        .status-badge.status-failed {\n            background: #fee2e2;\n            color: #dc2626;\n        }<\/p>\n<p>        @media (max-width: 768px) {\n            .payments-table th,\n            .payments-table td {\n                padding: 8px 12px;\n                font-size: 12px;\n            }<\/p>\n<p>            .payments-table .payment-amount,\n            .payments-table .payment-amount strong {\n                font-size: 12px !important;\n            }<\/p>\n<p>            .view-receipt-btn {\n                padding: 4px 8px;\n                font-size: 11px;\n            }\n        }\n        }\n        <\/style>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","_lmt_disableupdate":"","_lmt_disable":"","_ayudawp_aiss_exclude":false,"footnotes":""},"coauthors":[],"class_list":["post-2601","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/times509.com\/index.php\/wp-json\/wp\/v2\/pages\/2601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/times509.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/times509.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/times509.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/times509.com\/index.php\/wp-json\/wp\/v2\/comments?post=2601"}],"version-history":[{"count":0,"href":"https:\/\/times509.com\/index.php\/wp-json\/wp\/v2\/pages\/2601\/revisions"}],"wp:attachment":[{"href":"https:\/\/times509.com\/index.php\/wp-json\/wp\/v2\/media?parent=2601"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/times509.com\/index.php\/wp-json\/wp\/v2\/coauthors?post=2601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}