initial commit

resources/views/import/show.blade.php

@@ -0,0 +1,144 @@
+@extends('layouts.app')
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    const statusEl = document.getElementById('upload-status');
+    if (!statusEl) {
+        return;
+    }
+
+    const uuid = statusEl.dataset.importUuid;
+    if (!uuid) {
+        return;
+    }
+
+    statusEl.style.display = 'block';
+
+    const formatDuration = (startIso, endIso) => {
+        if (!startIso || !endIso) {
+            return 'N/A';
+        }
+
+        const start = new Date(startIso);
+        const end = new Date(endIso);
+        if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) {
+            return 'N/A';
+        }
+
+        const totalSeconds = Math.max(0, Math.round((end - start) / 1000));
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = totalSeconds % 60;
+
+        return minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
+    };
+
+    const render = (data) => {
+        const state = data.state || 'UNKNOWN';
+        if (state !== 'DONE') {
+            statusEl.textContent = `Processing (${state})`;
+            return;
+        }
+
+        const duration = formatDuration(data.started_at, data.finished_at);
+        statusEl.innerHTML = `
+            <div class="rounded-md border border-zinc-200 bg-zinc-50 p-4 text-sm">
+                <div class="inline-flex items-center rounded-full border border-emerald-200 bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-900">
+                    Import done
+                </div>
+                <div class="mt-3">
+                    <div class="grid w-full grid-cols-5 gap-2 text-right">
+                        <div class="rounded-md border border-zinc-200 bg-white px-3 py-2">
+                            <div class="text-[11px] font-semibold uppercase tracking-wide text-zinc-500">Total</div>
+                            <div class="text-sm font-semibold text-zinc-900">${data.total_processed ?? 0}</div>
+                        </div>
+                        <div class="rounded-md border border-zinc-200 bg-white px-3 py-2">
+                            <div class="text-[11px] font-semibold uppercase tracking-wide text-zinc-500">Imported</div>
+                            <div class="text-sm font-semibold text-zinc-900">${data.total_processed - data.errors - data.duplicates}</div>
+                        </div>
+                        <div class="rounded-md border border-zinc-200 bg-white px-3 py-2">
+                            <div class="text-[11px] font-semibold uppercase tracking-wide text-zinc-500">Failed</div>
+                            <div class="text-sm font-semibold text-zinc-900">${data.errors ?? 0}</div>
+                        </div>
+                        <div class="rounded-md border border-zinc-200 bg-white px-3 py-2">
+                            <div class="text-[11px] font-semibold uppercase tracking-wide text-zinc-500">Duplicates</div>
+                            <div class="text-sm font-semibold text-zinc-900">${data.duplicates ?? 0}</div>
+                        </div>
+                        <div class="rounded-md border border-zinc-200 bg-white px-3 py-2">
+                            <div class="text-[11px] font-semibold uppercase tracking-wide text-zinc-500">Duration</div>
+                            <div class="text-sm font-semibold text-zinc-900">${duration}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    };
+
+    const fetchStatus = async () => {
+        const response = await fetch(`/api/imports/${uuid}`, {
+            headers: {
+                'Accept': 'application/json',
+            },
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to load import status');
+        }
+
+        return response.json();
+    };
+
+    const poll = async () => {
+        try {
+            const data = await fetchStatus();
+            render(data);
+            if (data.state === 'DONE' || data.state === 'FAILED') {
+                document.getElementById('import-form').style.display = 'block';
+                clearInterval(timer);
+            }
+        } catch (error) {
+            statusEl.textContent = 'Failed to load import status.';
+            document.getElementById('import-form').style.display = 'block';
+            clearInterval(timer);
+        }
+    };
+
+    const timer = setInterval(poll, 2000);
+    poll();
+});
+</script>
+
+@section('content')
+    <div class="mb-6">
+        <p class="text-sm text-zinc-600">Upload an XML file to import contacts.</p>
+    </div>
+
+    @if($importUuid !== null)
+        <div id="upload-status" style="display: none;" data-import-uuid="{{ $importUuid }}">
+            Loading...
+        </div>
+    @endif
+
+    <div class="rounded-lg border border-zinc-200 bg-white p-6" id="import-form"  @if($importUuid !== null)style="display: none" @endif>
+        <form method="post" action="{{ route('import.store') }}" enctype="multipart/form-data">
+            @csrf
+            <div>
+                <label for="file" class="text-sm font-medium text-zinc-700">XML file</label>
+                <div class="mt-2 flex items-center justify-between gap-4">
+                    <input
+                        id="file"
+                        name="file"
+                        type="file"
+                        accept=".xml,text/xml,application/xml"
+                        class="block w-full flex-1 text-sm text-zinc-700 file:mr-4 file:rounded-md file:border-0 file:bg-zinc-900 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-white"
+                    />
+                    <button type="submit" class="shrink-0 rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700">
+                        Start import
+                    </button>
+                </div>
+                @error('file')
+                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
+                @enderror
+            </div>
+        </form>
+    </div>
+@endsection