{"id":7,"date":"2026-01-15T13:29:54","date_gmt":"2026-01-15T13:29:54","guid":{"rendered":"https:\/\/dev.mikeybryce.com\/?page_id=7"},"modified":"2026-01-15T13:29:54","modified_gmt":"2026-01-15T13:29:54","slug":"json-checker","status":"publish","type":"page","link":"https:\/\/dev.mikeybryce.com\/?page_id=7","title":{"rendered":"JSON Checker"},"content":{"rendered":"\n\r\n<div id=\"vpjc-checker\" class=\"vpjc-container vpjc-theme-light\">\r\n\r\n    <!-- Header -->\r\n    <div class=\"vpjc-header\">\r\n        <div class=\"vpjc-logo\">\r\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                <circle cx=\"16\" cy=\"16\" r=\"14\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n                <path d=\"M10 16L14 20L22 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n            <\/svg>\r\n            <span class=\"vpjc-title\">VeriPAYE JSON Checker<\/span>\r\n        <\/div>\r\n        <p class=\"vpjc-subtitle\">Validate your JSON files before submitting to veriPAYE<\/p>\r\n    <\/div>\r\n\r\n    <!-- Upload Section -->\r\n    <div class=\"vpjc-upload-section\">\r\n        <div class=\"vpjc-dropzone\" id=\"vpjc-dropzone\">\r\n            <div class=\"vpjc-dropzone-content\">\r\n                <svg class=\"vpjc-upload-icon\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                    <path d=\"M24 32V16M24 16L18 22M24 16L30 22\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                    <path d=\"M40 32V36C40 38.2091 38.2091 40 36 40H12C9.79086 40 8 38.2091 8 36V32\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                <\/svg>\r\n                <p class=\"vpjc-dropzone-text\">Drag &amp; drop JSON file here<\/p>\r\n                <p class=\"vpjc-dropzone-subtext\">or click to browse<\/p>\r\n                <p class=\"vpjc-dropzone-size\">\r\n                    Maximum file size: 10 MB                <\/p>\r\n            <\/div>\r\n            <input type=\"file\" accept=\".json,application\/json\" id=\"vpjc-file-input\" class=\"vpjc-file-input\" \/>\r\n        <\/div>\r\n\r\n                <div class=\"vpjc-divider\">\r\n            <span>OR<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"vpjc-paste-section\">\r\n            <button type=\"button\" id=\"vpjc-paste-toggle\" class=\"vpjc-btn vpjc-btn-secondary\">\r\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                    <path d=\"M10 2H4C3.44772 2 3 2.44772 3 3V13C3 13.5523 3.44772 14 4 14H12C12.5523 14 13 13.5523 13 13V5L10 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                    <path d=\"M10 2V5H13\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                <\/svg>\r\n                Paste JSON text            <\/button>\r\n\r\n            <div class=\"vpjc-paste-area\" id=\"vpjc-paste-area\" style=\"display: none;\">\r\n                <textarea id=\"vpjc-json-input\" class=\"vpjc-textarea\" placeholder=\"Paste your JSON here...\"><\/textarea>\r\n                <div class=\"vpjc-paste-actions\">\r\n                    <button type=\"button\" id=\"vpjc-validate-btn\" class=\"vpjc-btn vpjc-btn-primary\">\r\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                            <path d=\"M13.5 4.5L6 12L2.5 8.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                        <\/svg>\r\n                        Validate JSON                    <\/button>\r\n                    <button type=\"button\" id=\"vpjc-clear-paste-btn\" class=\"vpjc-btn vpjc-btn-secondary\">\r\n                        Clear                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n            <\/div>\r\n\r\n    <!-- Loading Spinner -->\r\n    <div class=\"vpjc-loading\" id=\"vpjc-loading\" style=\"display: none;\">\r\n        <div class=\"vpjc-spinner\"><\/div>\r\n        <p>Validating JSON...<\/p>\r\n    <\/div>\r\n\r\n    <!-- Results Section -->\r\n    <div class=\"vpjc-results\" id=\"vpjc-results\" style=\"display: none;\">\r\n\r\n        <!-- Summary Dashboard -->\r\n        <div class=\"vpjc-summary\" id=\"vpjc-summary\">\r\n            <div class=\"vpjc-summary-status\" id=\"vpjc-summary-status\">\r\n                <!-- Status badge inserted by JS -->\r\n            <\/div>\r\n            <div class=\"vpjc-summary-counts\">\r\n                <div class=\"vpjc-count vpjc-count-critical\" id=\"vpjc-count-critical\">\r\n                    <span class=\"vpjc-count-number\">0<\/span>\r\n                    <span class=\"vpjc-count-label\">Critical<\/span>\r\n                <\/div>\r\n                <div class=\"vpjc-count vpjc-count-warning\" id=\"vpjc-count-warning\">\r\n                    <span class=\"vpjc-count-number\">0<\/span>\r\n                    <span class=\"vpjc-count-label\">Warnings<\/span>\r\n                <\/div>\r\n                <div class=\"vpjc-count vpjc-count-info\" id=\"vpjc-count-info\">\r\n                    <span class=\"vpjc-count-number\">0<\/span>\r\n                    <span class=\"vpjc-count-label\">Info<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Actions Bar -->\r\n        <div class=\"vpjc-actions-bar\">\r\n            <div class=\"vpjc-actions-left\">\r\n                <button type=\"button\" id=\"vpjc-new-validation-btn\" class=\"vpjc-btn vpjc-btn-secondary\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <path d=\"M8 3V13M3 8H13\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n                    <\/svg>\r\n                    New Validation                <\/button>\r\n            <\/div>\r\n            <div class=\"vpjc-actions-right\">\r\n                <button type=\"button\" id=\"vpjc-copy-errors-btn\" class=\"vpjc-btn vpjc-btn-secondary\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <rect x=\"5\" y=\"5\" width=\"8\" height=\"9\" rx=\"1\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <path d=\"M3 11V3C3 2.44772 3.44772 2 4 2H10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n                    <\/svg>\r\n                    Copy Errors                <\/button>\r\n                <button type=\"button\" id=\"vpjc-export-btn\" class=\"vpjc-btn vpjc-btn-secondary\">\r\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <path d=\"M8 2V10M8 10L5 7M8 10L11 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                        <path d=\"M2 12V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\r\n                    <\/svg>\r\n                    Export Report                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Tabs -->\r\n        <div class=\"vpjc-tabs\">\r\n            <button type=\"button\" class=\"vpjc-tab vpjc-tab-active\" data-tab=\"errors\">\r\n                Errors                <span class=\"vpjc-tab-count\" id=\"vpjc-errors-tab-count\">0<\/span>\r\n            <\/button>\r\n            <button type=\"button\" class=\"vpjc-tab\" data-tab=\"payments\">\r\n                Payment Records                <span class=\"vpjc-tab-count\" id=\"vpjc-payments-tab-count\">0<\/span>\r\n            <\/button>\r\n            <button type=\"button\" class=\"vpjc-tab\" data-tab=\"preview\">\r\n                JSON Preview            <\/button>\r\n        <\/div>\r\n\r\n        <!-- Tab Content: Errors -->\r\n        <div class=\"vpjc-tab-content vpjc-tab-content-active\" id=\"vpjc-tab-errors\">\r\n            <div class=\"vpjc-filters\">\r\n                <label class=\"vpjc-filter-label\">Filter:<\/label>\r\n                <button type=\"button\" class=\"vpjc-filter-btn vpjc-filter-active\" data-filter=\"all\">All<\/button>\r\n                <button type=\"button\" class=\"vpjc-filter-btn\" data-filter=\"critical\">Critical<\/button>\r\n                <button type=\"button\" class=\"vpjc-filter-btn\" data-filter=\"warning\">Warning<\/button>\r\n                <button type=\"button\" class=\"vpjc-filter-btn\" data-filter=\"info\">Info<\/button>\r\n            <\/div>\r\n            <div class=\"vpjc-errors-list\" id=\"vpjc-errors-list\">\r\n                <!-- Errors inserted by JS -->\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Tab Content: Payment Records -->\r\n        <div class=\"vpjc-tab-content\" id=\"vpjc-tab-payments\">\r\n            <div class=\"vpjc-payments-list\" id=\"vpjc-payments-list\">\r\n                <!-- Payment summaries inserted by JS -->\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Tab Content: JSON Preview -->\r\n        <div class=\"vpjc-tab-content\" id=\"vpjc-tab-preview\">\r\n            <div class=\"vpjc-preview-toolbar\">\r\n                <button type=\"button\" id=\"vpjc-expand-all-btn\" class=\"vpjc-btn vpjc-btn-small\">\r\n                    Expand All                <\/button>\r\n                <button type=\"button\" id=\"vpjc-collapse-all-btn\" class=\"vpjc-btn vpjc-btn-small\">\r\n                    Collapse All                <\/button>\r\n                <button type=\"button\" id=\"vpjc-copy-json-btn\" class=\"vpjc-btn vpjc-btn-small\">\r\n                    Copy JSON                <\/button>\r\n            <\/div>\r\n            <div class=\"vpjc-json-preview\" id=\"vpjc-json-preview\">\r\n                <pre><code id=\"vpjc-json-code\"><\/code><\/pre>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"vpjc-footer\">\r\n        <p>\r\n            Powered by <a href=\"https:\/\/veripaye.co.uk\" target=\"_blank\" rel=\"noopener noreferrer\">veriPAYE<\/a> | <a href=\"https:\/\/fcsa.org.uk\" target=\"_blank\" rel=\"noopener noreferrer\">FCSA<\/a>        <\/p>\r\n    <\/div>\r\n\r\n<\/div>\r\n\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":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dev.mikeybryce.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.mikeybryce.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.mikeybryce.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.mikeybryce.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.mikeybryce.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":1,"href":"https:\/\/dev.mikeybryce.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/dev.mikeybryce.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/dev.mikeybryce.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}