Encuentra tus medicamentos en farmacias cercanas
diff --git a/frontend/src/views/ScannerView.css b/frontend/src/views/ScannerView.css
index 920844a..e04c0d4 100644
--- a/frontend/src/views/ScannerView.css
+++ b/frontend/src/views/ScannerView.css
@@ -358,3 +358,87 @@
@keyframes spin {
to { transform: rotate(360deg); }
}
+
+/* Photo upload section */
+.upload-section {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.upload-label {
+ font-size: 0.8rem;
+ color: var(--on-surface-variant);
+ font-weight: 600;
+ letter-spacing: 0.04em;
+}
+
+.upload-row {
+ display: flex;
+ gap: 0.75rem;
+}
+
+.upload-option {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ padding: 1.25rem 0.75rem;
+ background: var(--surface-container-lowest);
+ border: 2px solid var(--outline-variant);
+ border-radius: var(--radius-md);
+ cursor: pointer;
+ font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: var(--on-surface);
+ transition: border-color 0.15s, background 0.15s;
+}
+
+.upload-option:hover {
+ border-color: var(--primary);
+ background: var(--surface-container);
+}
+
+.upload-option:active {
+ transform: scale(0.97);
+}
+
+.upload-option svg {
+ color: var(--primary);
+}
+
+.upload-hidden-input {
+ display: none;
+}
+
+/* Photo preview */
+.photo-preview-panel {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.photo-preview-container {
+ width: 100%;
+ border-radius: var(--radius-md);
+ overflow: hidden;
+ background: #000;
+ max-height: 22rem;
+}
+
+.photo-preview-img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ display: block;
+ max-height: 22rem;
+}
+
+.photo-preview-actions {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
diff --git a/frontend/src/views/ScannerView.jsx b/frontend/src/views/ScannerView.jsx
index e761c95..7e2ab17 100644
--- a/frontend/src/views/ScannerView.jsx
+++ b/frontend/src/views/ScannerView.jsx
@@ -43,6 +43,12 @@ function ScannerView({ onClose, onSelectMedicine }) {
const [loadingPrescriptions, setLoadingPrescriptions] = useState(false);
const [errorMsg, setErrorMsg] = useState('');
+ // Photo upload state
+ const [previewUrl, setPreviewUrl] = useState(null);
+ const [ocrLoading, setOcrLoading] = useState(false);
+ const cameraInputRef = useRef(null);
+ const galleryInputRef = useRef(null);
+
const isNative = Capacitor.isNativePlatform();
const fetchPrescriptions = useCallback(async (cip) => {
@@ -237,6 +243,61 @@ function ScannerView({ onClose, onSelectMedicine }) {
fetchPrescriptions(cip);
}
+ // Photo upload handlers
+ function handlePhotoSelect(e) {
+ const file = e.target.files?.[0];
+ if (!file) return;
+ setErrorMsg('');
+ setPreviewUrl(URL.createObjectURL(file));
+ setPhase('photo-preview');
+ // Reset input so selecting the same file again triggers onChange
+ e.target.value = '';
+ }
+
+ async function handlePhotoOcr() {
+ if (!previewUrl) return;
+ setOcrLoading(true);
+ setErrorMsg('');
+ try {
+ const res = await fetch(previewUrl);
+ const blob = await res.blob();
+ const formData = new FormData();
+ formData.append('photo', blob, 'tsi.jpg');
+
+ const ocrRes = await fetch('/api/tsi/ocr', { method: 'POST', body: formData });
+ const data = await ocrRes.json();
+
+ if (!ocrRes.ok) {
+ setErrorMsg(data.error || 'No se pudo leer la imagen. Intenta con otra foto.');
+ setPhase('error');
+ return;
+ }
+
+ const cip = data.cip;
+ if (!CIP_REGEX.test(cip)) {
+ setErrorMsg(`CIP detectado "${cip}" no tiene formato válido. Introduce el código manualmente.`);
+ setPhase('error');
+ return;
+ }
+
+ playBeep();
+ setScannedCip(cip);
+ setPreviewUrl(null);
+ setPhase('prescriptions');
+ fetchPrescriptions(cip);
+ } catch (err) {
+ setErrorMsg(`Error al procesar la imagen: ${err.message || 'Error desconocido'}`);
+ setPhase('error');
+ } finally {
+ setOcrLoading(false);
+ }
+ }
+
+ function handlePhotoDiscard() {
+ setPreviewUrl(null);
+ setPhase('idle');
+ }
+
function handlePickPrescription(rx) {
stopCamera();
onSelectMedicine(rx.name);
@@ -248,6 +309,9 @@ function ScannerView({ onClose, onSelectMedicine }) {
setPhase('idle');
setPrescriptions([]);
setScannedCip(null);
+ } else if (phase === 'photo-preview') {
+ setPreviewUrl(null);
+ setPhase('idle');
} else {
onClose();
}
@@ -285,13 +349,51 @@ function ScannerView({ onClose, onSelectMedicine }) {
)}
{phase === 'idle' && (
-
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
)}
{phase === 'scanning' && !isNative && (
@@ -314,6 +416,38 @@ function ScannerView({ onClose, onSelectMedicine }) {
)}
+ {phase === 'photo-preview' && (
+ 
- 
+ 