File size: 3,687 Bytes
da6ee5e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Validate — Sheetly</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="/static/css/styles.css" />
</head>
<body>
    <div class="shell shell-wide">
        <nav class="nav">
            <a class="brand" href="/">Sheetly</a>
            <div class="nav-links">
                <a href="/">Upload</a>
                <a class="active" href="/validate">Validate</a>
                <a href="/dashboard">Dashboard</a>
            </div>
        </nav>

        <section class="hero">
            <h1>Validation desk</h1>
            <p>
                Review extractions against the source. Doubtful fields
                stay highlighted until you confirm or correct them.
            </p>
        </section>

        <div class="validate-toolbar">
            <div class="toolbar-meta">
                <div class="counter" id="counter">
                    <strong>0</strong> / 0 documents
                </div>
            </div>
            <div class="actions toolbar-actions">
                <button id="prevBtn" class="secondary" type="button">
                    Previous
                </button>
                <button id="nextBtn" class="secondary" type="button">
                    Next
                </button>
                <button id="saveBtn" type="button">
                    Save corrections
                </button>
            </div>
        </div>

        <div class="workspace">
            <aside class="queue-pane">
                <div class="pane-head">
                    <h2>Queue</h2>
                    <span class="badge" id="queueCount">0</span>
                </div>
                <div class="queue-search">
                    <input
                        id="queueSearch"
                        type="search"
                        placeholder="Filter by name or type…"
                        autocomplete="off"
                    />
                </div>
                <ul class="queue-list" id="queueList"></ul>
            </aside>

            <section class="preview-pane">
                <div class="pane-head">
                    <h2>Source</h2>
                    <span class="badge" id="fileBadge"></span>
                </div>
                <div class="preview-body" id="preview">
                    <p class="preview-empty">
                        Select a document to preview the source.
                    </p>
                </div>
            </section>

            <section class="fields-pane">
                <div class="pane-head">
                    <h2>Extracted data</h2>
                    <span class="badge" id="typeBadge"></span>
                </div>
                <div class="fields-body">
                    <ul class="issues" id="issues"></ul>
                    <form id="fieldsForm">
                        <p class="fields-empty">
                            Structured fields appear here once a
                            document is selected.
                        </p>
                    </form>
                </div>
            </section>
        </div>
    </div>
    <div class="toast" id="toast" role="status"></div>
    <script src="/static/js/validate.js"></script>
</body>
</html>