Michael
58d0009849
Move app.css and shell.js into layout-review/ alongside the .html files and reference them by bare filename; drop the assets/ subfolder. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
225 lines
12 KiB
HTML
225 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Layout review — Standardize Formats</title>
|
|
<link rel="stylesheet" href="app.css">
|
|
</head>
|
|
<body data-page="03_format_standardizer">
|
|
<div class="dt-app">
|
|
<aside class="dt-sidebar" id="dt-sidebar"></aside>
|
|
<main class="dt-main">
|
|
<div class="dt-review-banner">
|
|
<span class="dt-mi">visibility</span>
|
|
<span>Static layout preview of <strong>Standardize Formats</strong>, shown with a file imported from the upload screen and a completed run (results + changes audit + standardized preview). <a href="index.html">All pages →</a></span>
|
|
</div>
|
|
<div class="dt-main-inner">
|
|
|
|
<!-- Tool header -->
|
|
<div class="dt-tool-header">
|
|
<h1>Standardize Formats</h1>
|
|
<button class="dt-help-btn"><span class="dt-mi">help_outline</span> Help</button>
|
|
</div>
|
|
<p class="dt-tool-caption">Make dates, phones, currency, and names look the same throughout.</p>
|
|
|
|
<div class="dt-spacer"></div>
|
|
|
|
<!-- File pickup banner (using file from upload screen) -->
|
|
<div class="dt-alert info">
|
|
<span class="dt-mi">description</span>
|
|
<span>Using <strong>customers_export.csv</strong> from the upload screen.</span>
|
|
</div>
|
|
<button class="dt-btn" style="margin-bottom:4px">Use a different file</button>
|
|
|
|
<!-- Preview expander (collapsed once a result exists) -->
|
|
<details class="dt-expander">
|
|
<summary>Preview: customers_export.csv</summary>
|
|
<div class="dt-expander-body">
|
|
<p class="dt-caption">18,442 rows, 6 columns</p>
|
|
<div class="dt-table-wrap">
|
|
<table class="dt-table">
|
|
<thead><tr><th class="idx"></th><th>full_name</th><th>phone</th><th>amount</th><th>signup_date</th><th>active</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="idx">0</td><td>jane DOE</td><td>(512) 555-0190</td><td>$1,234.5</td><td>01/04/2024</td><td>Y</td></tr>
|
|
<tr><td class="idx">1</td><td>bob smith</td><td>720.555.7781</td><td>$99</td><td>2024-2-11</td><td>yes</td></tr>
|
|
<tr><td class="idx">2</td><td>ALICIA REYES</td><td>+1 415 555 2233</td><td>$45,000</td><td>Mar 3, 2024</td><td>n</td></tr>
|
|
<tr><td class="idx">3</td><td>m. okafor</td><td>2125550148</td><td>$7.999</td><td>2024/04/22</td><td>true</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<hr class="dt-divider">
|
|
|
|
<!-- Options expander (collapsed after run; opened here to show the most informative content) -->
|
|
<details class="dt-expander" open>
|
|
<summary>Options</summary>
|
|
<div class="dt-expander-body">
|
|
|
|
<h3 style="margin-top:0">Column types</h3>
|
|
<p class="dt-caption">Assign each column to a field type. Auto-detected suggestions are pre-filled; pick <strong>(skip)</strong> to leave a column untouched.</p>
|
|
|
|
<!-- Per-column type selectboxes, 3 per row -->
|
|
<div class="dt-cols-3">
|
|
<div class="dt-field"><label class="dt-label">full_name</label><div class="dt-select">Name</div></div>
|
|
<div class="dt-field"><label class="dt-label">phone</label><div class="dt-select">Phone</div></div>
|
|
<div class="dt-field"><label class="dt-label">amount</label><div class="dt-select">Currency</div></div>
|
|
</div>
|
|
<div class="dt-cols-3">
|
|
<div class="dt-field"><label class="dt-label">signup_date</label><div class="dt-select">Date</div></div>
|
|
<div class="dt-field"><label class="dt-label">active</label><div class="dt-select">Boolean</div></div>
|
|
<div class="dt-field"><label class="dt-label">notes</label><div class="dt-select">(skip)</div></div>
|
|
</div>
|
|
|
|
<hr class="dt-divider">
|
|
<h3>Format options</h3>
|
|
|
|
<!-- Standards preset radio (vertical) -->
|
|
<div class="dt-field">
|
|
<label class="dt-label">Standards preset</label>
|
|
<div style="display:flex;flex-direction:column;gap:8px;margin-top:4px">
|
|
<span class="dt-radio on"><span class="dot"></span> US (default) — ISO 8601 dates · E.164 phones · USD</span>
|
|
<span class="dt-radio"><span class="dot"></span> European — DMY input · INTL phones · EUR comma decimal</span>
|
|
<span class="dt-radio"><span class="dot"></span> UK — DD/MM/YYYY · GB phones · Yes/No booleans</span>
|
|
<span class="dt-radio"><span class="dot"></span> ISO Strict — ISO 8601 · bare-number currency · true/false</span>
|
|
<span class="dt-radio"><span class="dot"></span> Legacy US — MM/DD/YYYY · National phones · Yes/No</span>
|
|
<span class="dt-radio"><span class="dot"></span> Custom — keep current settings</span>
|
|
</div>
|
|
<div class="dt-help-text">Pick a published standard or regional convention as the baseline. Every option below is still individually overridable.</div>
|
|
</div>
|
|
|
|
<!-- Two-column format options -->
|
|
<div class="dt-cols-2" style="margin-top:14px">
|
|
<!-- Left column: Dates + Phones -->
|
|
<div>
|
|
<h4 style="margin-top:0"><strong>Dates</strong></h4>
|
|
<div class="dt-field"><label class="dt-label">Output format</label><div class="dt-select">YYYY-MM-DD (ISO)</div></div>
|
|
<div class="dt-field">
|
|
<label class="dt-label">Ambiguous input order (e.g. 01/02/2024)</label>
|
|
<div class="dt-radio-row">
|
|
<span class="dt-radio on"><span class="dot"></span> MDY (US)</span>
|
|
<span class="dt-radio"><span class="dot"></span> DMY (EU)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h4><strong>Phones</strong></h4>
|
|
<div class="dt-field"><label class="dt-label">Output format</label><div class="dt-select">E.164 (+15551234567)</div></div>
|
|
<div class="dt-field">
|
|
<label class="dt-label">Default region (ISO-2)</label>
|
|
<div class="dt-input">US</div>
|
|
<div class="dt-help-text">Region used when the input has no country code. US, GB, DE, etc.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right column: Currency + Names + Booleans -->
|
|
<div>
|
|
<h4 style="margin-top:0"><strong>Currency</strong></h4>
|
|
<div class="dt-field">
|
|
<label class="dt-label">Decimal separator in input</label>
|
|
<div class="dt-radio-row">
|
|
<span class="dt-radio on"><span class="dot"></span> dot (1,234.56)</span>
|
|
<span class="dt-radio"><span class="dot"></span> comma (1.234,56)</span>
|
|
</div>
|
|
</div>
|
|
<div class="dt-field" style="max-width:200px"><label class="dt-label">Round to decimals</label><div class="dt-input">2</div></div>
|
|
<div class="dt-check"><span class="box"></span> Preserve original precision (don't round)</div>
|
|
<div class="dt-check"><span class="box"></span> Preserve currency code (emit <code>USD 1234.56</code>, <code>EUR 99.00</code>, etc.)</div>
|
|
|
|
<h4><strong>Names</strong></h4>
|
|
<div class="dt-field"><label class="dt-label">Casing</label><div class="dt-select">Title Case</div></div>
|
|
|
|
<h4><strong>Booleans</strong></h4>
|
|
<div class="dt-field"><label class="dt-label">Output style</label><div class="dt-select">True/False</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</details>
|
|
|
|
<hr class="dt-divider">
|
|
<button class="dt-btn dt-btn-primary dt-btn-block">Standardize Formats</button>
|
|
|
|
<hr class="dt-divider">
|
|
|
|
<!-- Results -->
|
|
<h2>Results</h2>
|
|
<div class="dt-metrics">
|
|
<div class="dt-metric"><div class="label">Cells scanned</div><div class="value">92,210</div></div>
|
|
<div class="dt-metric"><div class="label">Cells changed</div><div class="value">61,838</div></div>
|
|
<div class="dt-metric"><div class="label">% changed</div><div class="value">67.1%</div></div>
|
|
<div class="dt-metric"><div class="label">Unparseable</div><div class="value">47</div></div>
|
|
</div>
|
|
|
|
<div class="dt-alert info">
|
|
<span class="dt-mi">info</span>
|
|
<span>47 cell(s) in typed columns didn't match a recognizable shape and were left as-is. Check the changes audit below to find them, or re-classify the column to <strong>(skip)</strong>.</span>
|
|
</div>
|
|
|
|
<!-- Changes by column -->
|
|
<p style="margin-bottom:6px"><strong>Changes by column</strong></p>
|
|
<div class="dt-table-wrap" style="max-width:520px">
|
|
<table class="dt-table">
|
|
<thead><tr><th>column</th><th>field_type</th><th>cells_changed</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>amount</td><td>currency</td><td>17,902</td></tr>
|
|
<tr><td>full_name</td><td>name</td><td>16,041</td></tr>
|
|
<tr><td>phone</td><td>phone</td><td>14,388</td></tr>
|
|
<tr><td>signup_date</td><td>date</td><td>11,205</td></tr>
|
|
<tr><td>active</td><td>boolean</td><td>2,302</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Examples (first 25 changes) -->
|
|
<p style="margin:14px 0 6px"><strong>Examples (first 25 changes)</strong></p>
|
|
<div class="dt-table-wrap">
|
|
<table class="dt-table">
|
|
<thead><tr><th>row</th><th>column</th><th>field_type</th><th>before</th><th>after</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>1</td><td>full_name</td><td>name</td><td class="dt-cell-del">jane DOE</td><td class="dt-cell-add">Jane Doe</td></tr>
|
|
<tr><td>1</td><td>phone</td><td>phone</td><td class="dt-cell-del">(512) 555-0190</td><td class="dt-cell-add">+15125550190</td></tr>
|
|
<tr><td>1</td><td>amount</td><td>currency</td><td class="dt-cell-del">$1,234.5</td><td class="dt-cell-add">1234.50</td></tr>
|
|
<tr><td>1</td><td>signup_date</td><td>date</td><td class="dt-cell-del">01/04/2024</td><td class="dt-cell-add">2024-01-04</td></tr>
|
|
<tr><td>1</td><td>active</td><td>boolean</td><td class="dt-cell-del">Y</td><td class="dt-cell-add">True</td></tr>
|
|
<tr><td>2</td><td>full_name</td><td>name</td><td class="dt-cell-del">bob smith</td><td class="dt-cell-add">Bob Smith</td></tr>
|
|
<tr><td>2</td><td>phone</td><td>phone</td><td class="dt-cell-del">720.555.7781</td><td class="dt-cell-add">+17205557781</td></tr>
|
|
<tr><td>2</td><td>signup_date</td><td>date</td><td class="dt-cell-del">2024-2-11</td><td class="dt-cell-add">2024-02-11</td></tr>
|
|
<tr><td>3</td><td>signup_date</td><td>date</td><td class="dt-cell-del">Mar 3, 2024</td><td class="dt-cell-add">2024-03-03</td></tr>
|
|
<tr><td>4</td><td>amount</td><td>currency</td><td class="dt-cell-del">$7.999</td><td class="dt-cell-add">8.00</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Standardized preview -->
|
|
<p style="margin:14px 0 6px"><strong>Standardized preview (first 10 rows)</strong></p>
|
|
<div class="dt-table-wrap">
|
|
<table class="dt-table">
|
|
<thead><tr><th class="idx"></th><th>full_name</th><th>phone</th><th>amount</th><th>signup_date</th><th>active</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="idx">0</td><td>Jane Doe</td><td>+15125550190</td><td>1234.50</td><td>2024-01-04</td><td>True</td></tr>
|
|
<tr><td class="idx">1</td><td>Bob Smith</td><td>+17205557781</td><td>99.00</td><td>2024-02-11</td><td>True</td></tr>
|
|
<tr><td class="idx">2</td><td>Alicia Reyes</td><td>+14155552233</td><td>45000.00</td><td>2024-03-03</td><td>False</td></tr>
|
|
<tr><td class="idx">3</td><td>M. Okafor</td><td>+12125550148</td><td>8.00</td><td>2024-04-22</td><td>True</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<hr class="dt-divider">
|
|
|
|
<!-- Downloads (3 columns) -->
|
|
<div class="dt-cols-3">
|
|
<button class="dt-btn dt-btn-primary">Download standardized CSV</button>
|
|
<button class="dt-btn">Download changes audit</button>
|
|
<button class="dt-btn">Download config JSON</button>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<footer class="dt-footer" id="dt-footer"></footer>
|
|
<script src="shell.js"></script>
|
|
</body>
|
|
</html>
|