To-Do-List

To-Do List

import React, { useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { toast } from "react-toastify"; import axios from "axios"; import { ArrowLeft, Upload, CheckCircle } from "lucide-react"; import PersonalDetails from "./PersonalDetails"; import DocumentForm from "./DocumentForm"; import "./Documents.css"; function Documents() { const navigate = useNavigate(); const [formData, setFormData] = useState({ fullName: "", dateOfBirth: "", phoneNumber: "", email: "", address: "", cardType: "", aadharPdf: null, panPdf: null, incomeProofPdf: null, declareInfo: false, authorize: false, }); const handleChange = (field, value) => { setFormData((prev) => ({ ...prev, [field]: value })); }; const handleSubmit = async (e) => { e.preventDefault(); // Validation if (!formData.declareInfo || !formData.authorize) { toast.error("Please accept both declarations!"); return; } if (!formData.fullName || !formData.email || !formData.phoneNumber || !formData.dateOfBirth || !formData.address || !formData.cardType) { toast.error("Please fill all required fields!"); return; } if (!formData.aadharPdf || !formData.panPdf || !formData.incomeProofPdf) { toast.error("Please upload all required documents!"); return; } const token = localStorage.getItem("token"); if (!token) { toast.error("Please login first!"); return; } const form = new FormData(); form.append("fullName", formData.fullName); form.append("email", formData.email); form.append("phoneNumber", formData.phoneNumber); form.append("dateOfBirth", formData.dateOfBirth); form.append("address", formData.address); form.append("cardType", formData.cardType); form.append("aadharPdf", formData.aadharPdf); form.append("panPdf", formData.panPdf); form.append("incomeProofPdf", formData.incomeProofPdf); try { const response = await axios.post( "http://localhost:8080/api/application/submit", form, { headers: { "Authorization": `Bearer ${token}`, "Content-Type": "multipart/form-data", }, } ); console.log("Response from backend:", response.data); toast.success("Application submitted successfully!"); // Redirect to onboarding page after successful submission setTimeout(() => { navigate('/onboarding'); }, 1500); } catch (error) { toast.error("Submission failed! Please try again."); console.error("Error uploading documents:", error); } }; return (

{/* Back Button */}

Add New Application

Fill in the details to create a new credit card application

handleChange("declareInfo", e.target.checked)} id="declareInfo" /> I declare that the above information is true and accurate.

handleChange("authorize", e.target.checked)} id="authorize" /> I authorize the bank to verify my details and documents.

); } export default Documents; .document-container { width: 95%; max-width: 1200px; margin: 40px auto; padding: 20px; background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 0 20px rgba(33, 150, 243, 0.08); animation: fadeInUp 0.6s ease forwards; transition: all 0.5s ease; position: relative; overflow: hidden; } .document-container::before { content: ''; position: absolute; top: -40px; right: -40px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(0, 123, 143, 0.1), transparent); z-index: 0; } /* Back Button */ .back-button { display: flex; align-items: center; gap: 8px; background: transparent; border: 2px solid #007b8f; color: #007b8f; padding: 10px 20px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-bottom: 20px; width: fit-content; } .back-button:hover { background: #007b8f; color: white; transform: translateX(-5px); } /* Header Styles */ .gradient-text { text-align: center; color: #007b8f; margin-bottom: 10px; font-size: clamp(24px, 5vw, 32px); letter-spacing: 1px; font-weight: 700; position: relative; z-index: 1; } .subtitle { text-align: center; color: #666; font-size: 16px; margin-bottom: 30px; font-weight: 400; } /* Card Styles */ .card { background: linear-gradient(145deg, #fff, #f8f9fa); padding: 25px; margin-bottom: 20px; border-radius: 15px; border: 1px solid rgba(0, 123, 143, 0.1); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; z-index: 1; } .card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 123, 143, 0.15); } .card h3 { color: #007b8f; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #007b8f; font-size: clamp(18px, 4vw, 22px); font-weight: 600; } /* Form Groups */ .form-group { display: flex; flex-direction: column; margin-bottom: 20px; position: relative; z-index: 1; } .form-group label { width: 100%; font-weight: 600; color: #333; font-size: clamp(14px, 3.5vw, 15px); margin-bottom: 8px; transition: color 0.3s ease; } .form-group:hover label { color: #007b8f; } .form-group input, .form-group select { width: 100%; padding: 12px; border-radius: 8px; border: 2px solid #e0e0e0; font-size: clamp(14px, 3.5vw, 15px); transition: all 0.3s ease; outline: none; background: #fff; } .form-group input:focus, .form-group select:focus { border-color: #007b8f; box-shadow: 0 0 0 3px rgba(0, 123, 143, 0.1); } .form-group input[type="file"] { padding: 10px; border: 2px dashed #ccc; background: #f9fbfc; cursor: pointer; transition: all 0.3s ease; } .form-group input[type="file"]:hover { border-color: #007b8f; background: #fff; } /* Declaration Section */ .declaration { background: #f8f9fa; padding: 20px; border-radius: 10px; margin: 25px 0; border-left: 4px solid #007b8f; } .declaration .form-check { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; padding: 10px; border-radius: 8px; transition: all 0.3s ease; } .declaration .form-check:hover { background: rgba(0, 123, 143, 0.05); } .declaration input[type="checkbox"] { margin-top: 3px; width: 20px; height: 20px; cursor: pointer; accent-color: #007b8f; } .declaration label { margin: 0; font-weight: 500; color: #333; font-size: 15px; line-height: 1.5; cursor: pointer; } /* Action Buttons */ .actions { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 30px; padding-top: 20px; border-top: 2px solid #f0f0f0; } .actions button { width: 100%; max-width: 300px; padding: 14px 24px; border: none; border-radius: 10px; cursor: pointer; font-size: 16px; font-weight: 600; letter-spacing: 0.5px; color: #fff; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; gap: 8px; } .submit-btn { background: linear-gradient(135deg, #007b8f 0%, #00434e 100%); } .submit-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 123, 143, 0.3); } .submit-btn:disabled { background: #ccc; cursor: not-allowed; opacity: 0.6; } .verify-btn { background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%); } .verify-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(33, 150, 243, 0.3); } /* Responsive Design */ @media (min-width: 768px) { .document-container { padding: 30px 40px; margin: 50px auto; } .card { padding: 30px; } .form-group { flex-direction: row; align-items: center; } .form-group label { width: 220px; margin-bottom: 0; margin-right: 20px; } .form-group input, .form-group select { flex: 1; } .actions { flex-direction: row; justify-content: center; gap: 20px; } .actions button { width: auto; min-width: 180px; } } @media (min-width: 1200px) { .document-container { padding: 40px 50px; margin: 60px auto; } .card { padding: 35px; } .gradient-text { font-size: 36px; } .form-group label { font-size: 16px; } .form-group input, .form-group select { font-size: 16px; padding: 14px; } .declaration { font-size: 16px; } .actions button { font-size: 17px; padding: 16px 28px; } } /* Animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }