From 7d1f8647a4a90d75e27e18afddade7a18805ca7f Mon Sep 17 00:00:00 2001 From: "Muhammad A. Ghorbani" Date: Sat, 5 Sep 2026 11:44:49 +0330 Subject: [PATCH] feat: add file upload preview pages and QuestionFile component implementation --- src/app/[lang]/preview-upload/page.tsx | 99 +++++++++++++++++ src/app/preview-upload/page.tsx | 106 +++++++++++++++++++ src/components/Componentes/question-file.tsx | 16 +-- 3 files changed, 215 insertions(+), 6 deletions(-) create mode 100644 src/app/[lang]/preview-upload/page.tsx create mode 100644 src/app/preview-upload/page.tsx diff --git a/src/app/[lang]/preview-upload/page.tsx b/src/app/[lang]/preview-upload/page.tsx new file mode 100644 index 0000000..5fa986a --- /dev/null +++ b/src/app/[lang]/preview-upload/page.tsx @@ -0,0 +1,99 @@ +"use client"; + +import React, { useMemo } from "react"; +import { QuestionFile } from "@/components/Componentes/question-file"; +import { QuestionAnswersProvider } from "@/components/Componentes/question-answer-storage"; +import type { QuestionField } from "@/lib/schema-adapter"; +import { I18nProvider } from "@/translations/provider"; + +const mockQuestion: QuestionField = { + id: "documents_verification.other_supporting_documents", + title: "Other Supporting Documents", + type: "file", + order: 1, + required: false, + baseRequired: false, + isVisible: true, + description: "", + tooltip: "Supporting documents for identity verification", + extras: { + options: [".pdf", ".jpg", ".jpeg", ".png"], + }, + options: [], +}; + +export default function PreviewUploadPage() { + const initialAnswers = useMemo( + () => ({ + "documents_verification.other_supporting_documents": [ + "/media/tmp/MKROrQ-Screenshot_2026.png", + "/media/tmp/0UKhA-Screenshot_2026.png", + ], + }), + [], + ); + + return ( + + +
+ {/* Top Bar */} +
+ + + Document Upload, Identity Verific... + +
+ + {/* Progress Indicator */} +
+
+ fields to complete + 4 / 4 +
+
+
+
+
+ + {/* Advisor Badge */} +
+
+ + + + + Private (Advisors Only) +
+
+ + {/* Question Component */} +
+ +
+ + {/* Spacer */} +
+ + {/* Bottom Button */} +
+ +
+
+ + + ); +} diff --git a/src/app/preview-upload/page.tsx b/src/app/preview-upload/page.tsx new file mode 100644 index 0000000..ed33874 --- /dev/null +++ b/src/app/preview-upload/page.tsx @@ -0,0 +1,106 @@ +"use client"; + +import React from "react"; +import { QuestionFile } from "@/components/Componentes/question-file"; +import { QuestionAnswersProvider } from "@/components/Componentes/question-answer-storage"; +import type { QuestionField } from "@/lib/schema-adapter"; +import { I18nProvider } from "@/translations/provider"; + +const mockQuestion: QuestionField = { + id: "documents_verification.other_supporting_documents", + title: "Other Supporting Documents", + type: "file", + order: 1, + required: false, + baseRequired: false, + isVisible: true, + description: "", + tooltip: "Supporting documents for identity verification", + extras: { + options: [".pdf", ".jpg", ".jpeg", ".png"], + }, + options: [], +}; + +const mockDocs = [ + { + url: "/media/tmp/MKROrQ-Screenshot_2026.png", + name: "MKROrQ-Screenshot_202...", + previewUrl: "data:image/svg+xml;utf8,", + }, + { + url: "/media/tmp/0UKhA-Screenshot_2026.png", + name: "0UKhA-Screenshot_202...", + previewUrl: "data:image/svg+xml;utf8,", + }, +]; + +export default function RootPreviewUploadPage() { + return ( + + +
+ {/* Top Bar */} +
+ + + Document Upload, Identity Verific... + +
+ + {/* Progress Indicator */} +
+
+ fields to complete + 4 / 4 +
+
+
+
+
+ + {/* Advisor Badge */} +
+
+ + + + + Private (Advisors Only) +
+
+ + {/* Question Component */} +
+ +
+ + {/* Spacer */} +
+ + {/* Bottom Button */} +
+ +
+
+ + + ); +} diff --git a/src/components/Componentes/question-file.tsx b/src/components/Componentes/question-file.tsx index 35e7540..af9a9a8 100644 --- a/src/components/Componentes/question-file.tsx +++ b/src/components/Componentes/question-file.tsx @@ -17,6 +17,8 @@ import { LoadingSkeleton } from "./loading-skeleton"; type QuestionFileProps = { question: QuestionField; disabled?: boolean; + debugProgress?: number; + initialDocs?: UploadedDoc[]; }; const FILE_I18N: Record< @@ -170,6 +172,8 @@ export type UploadedDoc = { export function QuestionFile({ question, disabled, + debugProgress, + initialDocs, }: QuestionFileProps) { const { locale } = useI18n(); const t = @@ -232,10 +236,12 @@ export function QuestionFile({ ); const [uploadedDocs, setUploadedDocs] = useState(() => - parseInitialDocs(storedValue), + initialDocs ?? parseInitialDocs(storedValue), + ); + const [isUploading, setIsUploading] = useState(debugProgress !== undefined); + const [uploadProgress, setUploadProgress] = useState( + debugProgress ?? null, ); - const [isUploading, setIsUploading] = useState(false); - const [uploadProgress, setUploadProgress] = useState(null); const isInitiatorRef = useRef(false); const pendingDeferredRef = useRef<{ resolve: (val?: any) => void; @@ -679,9 +685,7 @@ export function QuestionFile({ )}
- {uploadProgress !== null && uploadProgress > 0 - ? `${t.uploading} (${uploadProgress}%)` - : t.uploading} + {t.uploading}
)}