plagiatcheck part complated base new request types

src/widgets/plagiatCheck/ui/Plagiraismui.tsx

@@ -0,0 +1,452 @@
+import React, { useEffect } from 'react';
+
+// ─── FieldWrapper ────────────────────────────────────────────────────────────
+
+interface FieldWrapperProps {
+  label: string;
+  htmlFor?: string;
+  error?: string;
+  required?: boolean;
+  children: React.ReactNode;
+}
+
+export function FieldWrapper({
+  label,
+  htmlFor,
+  error,
+  required,
+  children,
+}: FieldWrapperProps) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label
+        htmlFor={htmlFor}
+        className="text-sm font-semibold tracking-wide text-stone-700 uppercase"
+      >
+        {label}
+        {required && <span className="ml-1 text-rose-500">*</span>}
+      </label>
+      {children}
+      {error && (
+        <p className="flex items-center gap-1.5 text-xs text-rose-600 font-medium">
+          <span className="inline-block w-1 h-1 rounded-full bg-rose-500" />
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}
+
+// ─── TextInput ───────────────────────────────────────────────────────────────
+
+interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  hasError?: boolean;
+}
+
+export function TextInput({
+  hasError,
+  className = '',
+  ...props
+}: TextInputProps) {
+  return (
+    <input
+      className={`
+        w-full px-4 py-3 rounded-xl border-2 bg-white
+        text-stone-800 placeholder:text-stone-400 text-sm font-medium
+        transition-all duration-200 outline-none
+        ${
+          hasError
+            ? 'border-rose-400 focus:border-rose-500 ring-2 ring-rose-100'
+            : 'border-stone-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100'
+        }
+        ${className}
+      `}
+      {...props}
+    />
+  );
+}
+
+// ─── ReadonlyField ───────────────────────────────────────────────────────────
+
+interface ReadonlyFieldProps {
+  value: string;
+  icon?: React.ReactNode;
+  autoFilledText?: string;
+}
+
+export function ReadonlyField({
+  value,
+  icon,
+  autoFilledText = 'Auto-filled',
+}: ReadonlyFieldProps) {
+  return (
+    <div className="flex items-center gap-3 px-4 py-3 rounded-xl bg-stone-100 border-2 border-stone-200">
+      {icon && <span className="text-stone-500 shrink-0">{icon}</span>}
+      <span className="text-sm font-semibold text-stone-700">{value}</span>
+      <span className="ml-auto text-xs text-stone-400 italic font-medium">
+        {autoFilledText}
+      </span>
+    </div>
+  );
+}
+
+// ─── FileUploadField ─────────────────────────────────────────────────────────
+
+interface FileUploadFieldProps {
+  file: File | null;
+  onFileChange: (file: File | null) => void;
+  hasError?: boolean;
+  accept?: string;
+  clickToUploadText?: string;
+  fileTypesText?: string;
+  removeFileAriaLabel?: string;
+}
+
+export function FileUploadField({
+  file,
+  onFileChange,
+  hasError,
+  accept = '.pdf,.doc,.docx,.txt',
+  clickToUploadText = 'Click to upload document',
+  fileTypesText = 'PDF, DOC, DOCX, TXT · Max 20 MB',
+  removeFileAriaLabel = 'Remove file',
+}: FileUploadFieldProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = e.target.files?.[0] ?? null;
+    onFileChange(selected);
+    // Reset so the same file can be re-selected after removal
+    e.target.value = '';
+  };
+
+  const handleRemove = () => {
+    onFileChange(null);
+  };
+
+  const formatBytes = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  return (
+    <div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        onChange={handleChange}
+        className="sr-only"
+        id="file-upload"
+      />
+
+      {!file ? (
+        <label
+          htmlFor="file-upload"
+          className={`
+            group flex flex-col items-center justify-center gap-3
+            w-full px-6 py-2 rounded-xl border-2 border-dashed
+            cursor-pointer transition-all duration-200
+            ${
+              hasError
+                ? 'border-rose-400 bg-rose-50 hover:bg-rose-50'
+                : 'border-stone-300 bg-stone-50 hover:border-blue-500 hover:bg-blue-50'
+            }
+          `}
+        >
+          <div
+            className={`
+            w-12 h-12 rounded-2xl flex items-center justify-center
+            transition-colors duration-200
+            ${hasError ? 'bg-rose-100' : 'bg-white group-hover:bg-blue-100'}
+          `}
+          >
+            <UploadIcon
+              className={
+                hasError
+                  ? 'text-rose-400'
+                  : 'text-stone-400 group-hover:text-blue-500'
+              }
+            />
+          </div>
+          <div className="text-center">
+            <p
+              className={`text-sm font-semibold transition-colors ${hasError ? 'text-rose-600' : 'text-stone-600 group-hover:text-blue-700'}`}
+            >
+              {clickToUploadText}
+            </p>
+            <p className="text-xs text-stone-400 mt-0.5">{fileTypesText}</p>
+          </div>
+        </label>
+      ) : (
+        <div className="flex items-center gap-3 px-4 py-3.5 rounded-xl border-2 border-blue-400 bg-blue-50">
+          <div className="w-9 h-9 rounded-lg bg-blue-100 flex items-center justify-center shrink-0">
+            <DocumentIcon className="text-blue-600" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-semibold text-stone-800 truncate">
+              {file.name}
+            </p>
+            <p className="text-xs text-stone-500">{formatBytes(file.size)}</p>
+          </div>
+          <button
+            type="button"
+            onClick={handleRemove}
+            className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 hover:text-rose-500 hover:bg-rose-100 transition-colors shrink-0"
+            aria-label={removeFileAriaLabel}
+          >
+            <XIcon />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── CertificateCheckbox ─────────────────────────────────────────────────────
+
+interface CertificateCheckboxProps {
+  checked: boolean;
+  onChange: () => void;
+  title?: string;
+  description?: string;
+}
+
+export function CertificateCheckbox({
+  checked,
+  onChange,
+  title = 'Return result with certificate',
+  description = 'An official certificate will be attached to your originality report.',
+}: CertificateCheckboxProps) {
+  return (
+    <label
+      className={`
+      flex items-start gap-3 px-4 py-4 rounded-xl border-2 cursor-pointer
+      transition-all duration-200
+      ${
+        checked
+          ? 'border-blue-400 bg-blue-50'
+          : 'border-stone-200 bg-white hover:border-stone-300'
+      }
+    `}
+    >
+      <div className="relative mt-0.5 shrink-0">
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={onChange}
+          className="sr-only"
+        />
+        <div
+          className={`
+          w-5 h-5 rounded-md border-2 flex items-center justify-center
+          transition-all duration-150
+          ${checked ? 'bg-blue-500 border-blue-500' : 'bg-white border-stone-300'}
+        `}
+        >
+          {checked && (
+            <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 12 12">
+              <path
+                d="M2 6l3 3 5-5"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          )}
+        </div>
+      </div>
+      <div>
+        <p className="text-sm font-semibold text-stone-800">{title}</p>
+        <p className="text-xs text-stone-500 mt-0.5">{description}</p>
+      </div>
+    </label>
+  );
+}
+
+// ─── SubmitButton ────────────────────────────────────────────────────────────
+
+interface SubmitButtonProps {
+  isLoading: boolean;
+  submittingText?: string;
+  submitText?: string;
+}
+
+export function SubmitButton({
+  isLoading,
+  submittingText = 'Submitting…',
+  submitText = 'Submit for Originality Check',
+}: SubmitButtonProps) {
+  return (
+    <button
+      type="submit"
+      disabled={isLoading}
+      className={`
+        w-full flex items-center justify-center gap-2.5
+        px-6 py-4 rounded-xl font-bold text-sm tracking-wide uppercase
+        transition-all duration-200
+        ${
+          isLoading
+            ? 'bg-stone-200 text-stone-400 cursor-not-allowed'
+            : 'bg-stone-900 text-white hover:bg-blue-600 active:scale-[0.99] shadow-lg shadow-stone-900/20 hover:shadow-blue-600/30'
+        }
+      `}
+    >
+      {isLoading ? (
+        <>
+          <SpinnerIcon />
+          {submittingText}
+        </>
+      ) : (
+        <>
+          <ShieldIcon />
+          {submitText}
+        </>
+      )}
+    </button>
+  );
+}
+
+// ─── StatusBanner ────────────────────────────────────────────────────────────
+
+interface StatusBannerProps {
+  status: 'success' | 'error';
+  message: string;
+  onDismiss: () => void;
+  dismissText?: string;
+}
+
+export function StatusBanner({
+  status,
+  message,
+  onDismiss,
+  dismissText = 'Dismiss',
+}: StatusBannerProps) {
+  const isSuccess = status === 'success';
+  useEffect(() => {
+    setTimeout(onDismiss, 3000);
+  }, []);
+  return (
+    <div
+      className={`
+      max-w-md w-full
+      flex items-center gap-3 px-4 py-4 rounded-xl border-2 absolute top-6 right-6 z-50
+      ${isSuccess ? 'bg-emerald-50 border-emerald-400' : 'bg-rose-50 border-rose-400'}
+    `}
+    >
+      <span
+        className={`text-lg mt-0.5 ${isSuccess ? 'text-emerald-600' : 'text-rose-600'}`}
+      >
+        {isSuccess ? '✓' : '✕'}
+      </span>
+      <p
+        className={`flex-1 text-sm font-medium ${isSuccess ? 'text-emerald-800' : 'text-rose-800'}`}
+      >
+        {message}
+      </p>
+      <button
+        type="button"
+        onClick={onDismiss}
+        className={`text-xs font-bold uppercase ${isSuccess ? 'text-emerald-600 hover:text-emerald-800' : 'text-rose-600 hover:text-rose-800'}`}
+      >
+        {dismissText}
+      </button>
+    </div>
+  );
+}
+
+// ─── Inline SVG Icons ────────────────────────────────────────────────────────
+
+function UploadIcon({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={`w-6 h-6 ${className}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+      />
+    </svg>
+  );
+}
+
+function DocumentIcon({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      className={`w-5 h-5 ${className}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={1.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+      />
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <svg
+      className="w-4 h-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6 18L18 6M6 6l12 12"
+      />
+    </svg>
+  );
+}
+
+function ShieldIcon() {
+  return (
+    <svg
+      className="w-4 h-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
+      />
+    </svg>
+  );
+}
+
+function SpinnerIcon() {
+  return (
+    <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      />
+    </svg>
+  );
+}