FRONTEND

JSX FILES
[Link]
import axios from "axios"
import {useState,useEffect} from "react"
import { useNavigate } from "react-router-dom"
import "./[Link]"

function Upload(){

const[file,setFile]=useState(null)
const[groups,setGroups]=useState([])
const[group,setGroup]=useState("")
const[type,setType]=useState("personal")

const navigate = useNavigate()

const[modal,setModal]=useState({
show:false,
title:"",
message:"",
type:""
})

useEffect(()=>{
loadGroups()
},[])

const loadGroups=async()=>{
try{
const token=[Link]("token")

const res=await [Link](

"[Link]
{
headers:{ Authorization:`Bearer ${token}` }
}
)

setGroups([Link])

}catch(err){
[Link](err)
}
}

/* FILE SELECT */
const handleFileChange=(e)=>{
setFile([Link][0])
}

/* DRAG DROP */
const handleDrop=(e)=>{
[Link]()
setFile([Link][0])
}
const handleDragOver=(e)=>{
[Link]()
}

/* UPLOAD */
const upload=async()=>{

if(!file){
setModal({
show:true,
title:"File Required",
message:"Please select a file",
type:"error"
})
return
}

if(type==="group" && !group){

setModal({
show:true,
title:"Group Required",
message:"Please select a group",
type:"error"
})
return
}

try{

const token=[Link]("token")

const form=new FormData()

[Link]("file",file)

if(type==="group"){
[Link]("group_id",group)
}

await [Link](
"[Link]
form,
{
headers:{
Authorization:`Bearer ${token}`,
"Content-Type":"multipart/form-data"
}
}
)

setModal({
show:true,
title:"Success",
message:"File uploaded successfully",
type:"success"
})

setFile(null)

}catch(err){
setModal({
show:true,
title:"Error",
message:"Upload failed",
type:"error"
})
}
}
return(

<div className="upload-page">

{/* MODAL */}

{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>
<span className="close"
onClick={()=>setModal({...modal,show:false})}>×</span>

<h3>{[Link]}</h3>
<p>{[Link]}</p>

<button onClick={()=>setModal({...modal,show:false})}>
OK
</button>
</div>
</div>
)}

{/* TOP NAV */}

<div className="upload-topbar">

<button onClick={()=>navigate("/dashboard")}>
🏠 Home
</button>

<button onClick={()=>navigate("/files")}>
📁 My Files
</button>

</div>

<div className="upload-card">

<h2>Secure File Upload</h2>

<p className="subtitle">
Upload encrypted files securely to personal cloud or group sharing.
</p>

{/* TYPE */}

<div className="input-group">
<label>Upload Type</label>

<select
onChange={(e)=>setType([Link])}
value={type}
>
<option value="personal">Personal Cloud</option>
<option value="group">Group Share</option>
</select>
</div>

{/* GROUP */}

{type==="group" && (
<div className="input-group">
<label>Select Group</label>

<select
onChange={(e)=>setGroup([Link])}
value={group}
>
<option value="">Select Group</option>
{[Link](g=>(
<option key={[Link]} value={[Link]}>
{g.group_name}
</option>
))}

</select>
</div>
)}

{/* UPLOAD BOX */}

<label
className="upload-box"
onDrop={handleDrop}
onDragOver={handleDragOver}
>

<input
type="file"
onChange={handleFileChange}
/>

<p className="upload-text">
Click or Drag file here
</p>

{file && (
<p className="filename">
Selected: {[Link]}
</p>
)}

</label>

{/* BUTTON */}

<button className="upload-btn" onClick={upload}>
Upload File
</button>

</div>

</div>
)
}

export default Upload

[Link]
import {useEffect,useState} from "react"
import axios from "axios"
import { useNavigate } from "react-router-dom"
import "./[Link]"

function ActiveGroups(){

const [groups,setGroups] = useState([])

const navigate = useNavigate()

const [modal,setModal] = useState({

show:false,
message:"",
type:""
})

useEffect(()=>{
fetchGroups()
},[])

const fetchGroups = async()=>{

try{

const token = [Link]("token")

const res = await [Link](

"[Link]
{headers:{Authorization:`Bearer ${token}`}}
)

setGroups([Link] || [])

}catch{
setGroups([])
}

/* JOIN */
const joinGroup = async(id)=>{

try{

const token = [Link]("token")

await [Link](
`[Link]
{},
{headers:{Authorization:`Bearer ${token}`}}
)

setModal({
show:true,
message:"Join request sent",
type:"success"
})

fetchGroups()

}catch{
setModal({
show:true,
message:"Failed to send request",
type:"error"
})

/* BUTTON */
const renderButton = (g)=>{

if([Link] === "pending"){

return <button className="btn pending" disabled>Pending ⏳</button>
}

if([Link] === "approved"){

return <button className="btn approved" disabled>Joined ✅</button>
}

if([Link] === "rejected"){

return (
<button className="btn retry" onClick={()=>joinGroup([Link])}>
Request Again 🔁
</button>
)
}

return (
<button className="btn join" onClick={()=>joinGroup([Link])}>
Join Group
</button>
)

return(

<div className="groups-page">

{/* MODAL */}

{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>
<span className="close" onClick={()=>setModal({...modal,show:false})}>×</span>
<p>{[Link]}</p>
<button onClick={()=>setModal({...modal,show:false})}>OK</button>
</div>
</div>
)}

{/* ✅ TOP CARD */}

<div className="top-card">

<h2>Active Groups</h2>

<div className="top-actions">
<button onClick={()=>navigate("/dashboard")}>🏠 Home</button>
<button onClick={()=>navigate("/groups")}>👥 My Groups</button>
</div>

</div>

{/* ✅ GROUP LIST CARD */}

<div className="groups-card">
<p className="subtitle">
Explore and join secure collaboration groups
</p>

<div className="groups-list">

{[Link] === 0 ? (
<p className="empty">No groups available</p>
) : (

[Link](g=>(

<div className="group-item" key={[Link]}>

<div className="group-left">

<h3>👥 {g.group_name}</h3>
<p className="desc">{[Link]}</p>
<p className="creator">Created by: {g.anonymous_creator}</p>

</div>

<div className="group-right">
{renderButton(g)}
</div>

</div>

))

)}

</div>

</div>

</div>

export default ActiveGroups

[Link]
import axios from "axios"
import {useState} from "react"
import {
FaUsers, FaShieldAlt, FaUser,
FaFolder, FaFile, FaHistory
} from "react-icons/fa"

import "./[Link]"

function AdminPanel(){

const[active,setActive] = useState("")
const[groups,setGroups] = useState([])
const[tampered,setTampered] = useState([])
const[users,setUsers] = useState([])
const[groupLogs,setGroupLogs] = useState([])
const[fileLogs,setFileLogs] = useState([])
const[activity,setActivity] = useState([])

const[modal,setModal] = useState({show:false,message:""})

/* ================= MODAL ================= */

const showMsg=(msg)=>{
setModal({show:true,message:msg})
}

/* ================= CLICK HANDLERS ================= */

const openGroups = async()=>{

setActive("groups")
const res = await [Link]("[Link]
setGroups([Link])
}

const openTampered = async()=>{

setActive("tampered")
const res = await [Link]("[Link]
setTampered([Link])
}

const openUsers = async()=>{

setActive("users")
const res = await [Link]("[Link]
setUsers([Link])
}

const openGroupLogs = async()=>{

setActive("groupLogs")
const res = await [Link]("[Link]
setGroupLogs([Link])
}

const openFiles = async()=>{

setActive("files")
const res = await [Link]("[Link]
setFileLogs([Link])
}

const openActivity = async()=>{

setActive("activity")
const res = await [Link]("[Link]
setActivity([Link])
}

/* ================= ACTIONS ================= */

const approve = async(id)=>{

await [Link](`[Link]
showMsg("Group approved")
openGroups()
}

const removeFile = async(id)=>{

await [Link](`[Link]
showMsg("File removed")
openTampered()
}

const removeUser = async(userId,groupId)=>{

await [Link](
`[Link]
)
showMsg("User removed")
openTampered()
}

const deleteUser = async(id)=>{

await [Link](`[Link]
showMsg("User deleted")
openUsers()
}

return(

<div className="adminPage">

{/* MODAL */}

{[Link] && (
<div className="modal">
<div className="modal-box">
<span onClick={()=>setModal({...modal,show:false})}>×</span>
<p>{[Link]}</p>
<button onClick={()=>setModal({...modal,show:false})}>OK</button>
</div>
</div>
)}

{/* HEADER */}

<div className="adminHeader">
<h2>Welcome to Admin Dashboard</h2>
<p className="subtitle">Manage system securely</p>
</div>

{/* DASH CARDS */}

<div className="cardGrid">

<div className="dashCard" onClick={openGroups}>

<FaUsers/> Group Approvals
</div>

<div className="dashCard" onClick={openTampered}>

<FaShieldAlt/> Tampered Files
</div>

<div className="dashCard" onClick={openUsers}>

<FaUser/> Users
</div>

<div className="dashCard" onClick={openGroupLogs}>

<FaFolder/> Groups
</div>

<div className="dashCard" onClick={openFiles}>

<FaFile/> Files
</div>

<div className="dashCard" onClick={openActivity}>

<FaHistory/> Activity Logs
</div>

</div>

{/* ================= DYNAMIC SECTION ================= */}

{active === "groups" && (

<div className="adminSection">
<h3>Group Approvals</h3>
<table className="adminTable">
<thead>
<tr><th>Group</th><th>Creator</th><th>Action</th></tr>
</thead>
<tbody>
{[Link](g=>(
<tr key={[Link]}>
<td>{g.group_name}</td>
<td>{[Link]}</td>
<td>
<button className="green" onClick={()=>approve([Link])}>
Approve
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}

{active === "tampered" && (

<div className="adminSection">
<h3>Tampered Files</h3>
<table className="adminTable">
<thead>
<tr><th>File</th><th>Group</th><th>Owner</th><th>User</th><th>Actions</th></tr>
</thead>
<tbody>
{[Link](f=>(
<tr key={[Link]}>
<td>{[Link]}</td>
<td>{f.group_name}</td>
<td>{[Link]}</td>
<td>{f.tampered_user}</td>
<td>
<button className="orange" onClick={()=>removeUser(f.tampered_by,f.group_id)}>Remove
User</button>
<button className="red" onClick={()=>removeFile([Link])}>Remove File</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}

{active === "users" && (

<div className="adminSection">
<h3>Users</h3>
<table className="adminTable">
<thead>
<tr><th>Name</th><th>Email</th><th>Registered</th><th>Action</th></tr>
</thead>
<tbody>
{[Link](u=>(
<tr key={[Link]}>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{u.created_at}</td>
<td>
<button className="red" onClick={()=>deleteUser([Link])}>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
)}

{active === "groupLogs" && (

<div className="adminSection">
<h3>Groups</h3>
<table className="adminTable">
<thead>
<tr><th>Group</th><th>Creator</th><th>Members</th><th>Created</th></tr>
</thead>
<tbody>
{[Link](g=>(
<tr key={[Link]}>
<td>{g.group_name}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{g.created_at}</td>
</tr>
))}
</tbody>
</table>
</div>
)}

{active === "files" && (

<div className="adminSection">
<h3>Files</h3>
<table className="adminTable">
<thead>
<tr><th>File</th><th>Owner</th><th>Uploaded</th></tr>
</thead>
<tbody>
{[Link](f=>(
<tr key={[Link]}>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{f.created_at}</td>
</tr>
))}
</tbody>
</table>
</div>
)}

{active === "activity" && (

<div className="adminSection">
<h3>Activity Logs</h3>
<table className="adminTable">
<thead>
<tr><th>User</th><th>Action</th><th>Resource</th><th>Time</th></tr>
</thead>
<tbody>
{[Link](a=>(
<tr key={[Link]}>
<td>{[Link] || "System"}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{a.created_at}</td>
</tr>
))}
</tbody>
</table>
</div>
)}

</div>

export default AdminPanel

[Link]
import { useParams, useNavigate } from "react-router-dom"
import axios from "axios"
import { useState } from "react"
import "./[Link]"

function Audit(){

const {id} = useParams()

const navigate = useNavigate()

const [loading,setLoading] = useState(false)

const [modal,setModal] = useState({

show:false,
message:"",
type:""
})

const startAudit = async ()=>{

try{

setLoading(true)

const token = [Link]("token")

const res = await [Link](

`[Link]
{},
{
headers:{ Authorization:`Bearer ${token}` }
}
)

setModal({
show:true,
message:[Link],
type: [Link] === "SAFE" ? "success" : "danger"
})

}catch{

setModal({
show:true,
message:"Audit Failed - File Tampered",
type:"danger"
})

setLoading(false)

return(

<div className="audit-page">

{/* MODAL */}

{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>
<span
className="close"
onClick={()=>setModal({...modal,show:false})}
>
×
</span>

<h3>
{[Link] === "success" ? "✅ File Safe" : "🚨 Tampered"}
</h3>

<p>{[Link]}</p>

<button onClick={()=>setModal({...modal,show:false})}>
OK
</button>

</div>
</div>
)}

{/* TOP BAR */}

<div className="audit-top">

<button onClick={()=>navigate(-1)}>
⬅ Back
</button>

</div>

{/* MAIN CARD */}

<div className="audit-card">

<h2>🔐 Third Party Auditor</h2>

<p className="subtitle">
Verify file integrity using smart block verification
</p>

<div className="file-id">
<span>File ID:</span> {id}
</div>

<button
className="audit-btn"
onClick={startAudit}
disabled={loading}
>
{loading ? "Auditing..." : "Start Smart Audit"}
</button>

{loading && (
<p className="loading">
🔍 Checking blocks securely...
</p>
)}

</div>

</div>

export default Audit

[Link]
import axios from "axios"
import { useState, useRef } from "react"
import { useNavigate } from "react-router-dom"
import logo from "../assets/[Link]";
import "./[Link]"

function ChangePassword(){

const[email,setEmail]=useState("")
const[otp,setOtp]=useState("")
const[newPassword,setNewPassword]=useState("")
const[confirmPassword,setConfirmPassword]=useState("")

const[otpSent,setOtpSent]=useState(false)
const[otpVerified,setOtpVerified]=useState(false)

const[showPassword,setShowPassword]=useState(false)
const[showRules,setShowRules]=useState(false)

const[modal,setModal]=useState({
show:false,
title:"",
message:"",
type:""
})

const navigate = useNavigate()

const otpRefs = useRef([])

/* PASSWORD RULES */
const checks = {
length: [Link] >= 8,
upper: /[A-Z]/.test(newPassword),
lower: /[a-z]/.test(newPassword),
number: /\d/.test(newPassword),
special: /[@$!%*?&]/.test(newPassword)
}

/* OTP HANDLER */
const handleOtpChange = (value,index)=>{
if(!/^[0-9]?$/.test(value)) return

let arr = [Link]("")

arr[index]=value
setOtp([Link](""))

if(value && index<5){

[Link][index+1].focus()
}
}

const handleKeyDown = (e,index)=>{

if([Link]==="Backspace"){
let arr = [Link]("")

if(arr[index]){
arr[index]=""
setOtp([Link](""))
}else if(index>0){
[Link][index-1].focus()
}
}
}

/* SEND OTP */
const sendOtp = async()=>{

if(!email){
setModal({
show:true,
title:"Email Required",
message:"Please enter your email.",
type:"error"
})
return
}

try{
await [Link](
"[Link]
{ email }
)

setOtpSent(true)

setModal({
show:true,
title:"OTP Sent",
message:"Check your email for OTP.",
type:"success"
})

}catch(err){
setModal({
show:true,
title:"Error",
message:[Link]?.data?.message || "Failed to send OTP",
type:"error"
})
}
}

/* VERIFY OTP */
const verifyOtp = async()=>{

if(!otp || [Link] !== 6){

setModal({
show:true,
title:"OTP Required",
message:"Please enter 6-digit OTP.",
type:"error"
})
return
}

try{
await [Link](
"[Link]
{ email, otp }
)

setOtpVerified(true)

setModal({
show:true,
title:"OTP Verified",
message:"You can now reset password.",
type:"success"
})
}catch(err){
setModal({
show:true,
title:"Invalid OTP",
message:[Link]?.data?.message || "Invalid or expired OTP",
type:"error"
})
}
}

/* UPDATE PASSWORD */
const updatePassword = async()=>{

if(.every(Boolean)){
setModal({
show:true,
title:"Weak Password",
message:"Password does not meet requirements.",
type:"error"
})
return
}

if(newPassword !== confirmPassword){

setModal({
show:true,
title:"Mismatch",
message:"Passwords do not match.",
type:"error"
})
return
}

try{
const res = await [Link](
"[Link]
{
email,
otp,
newPassword,
confirmPassword
}
)

setModal({
show:true,
title:"Success",
message:[Link],
type:"success"
})

/* 🔥 REDIRECT */
setTimeout(()=>{
navigate("/login")
},1500)

}catch(err){
setModal({
show:true,
title:"Error",
message:[Link]?.data?.message || "Failed to update password",
type:"error"
})
}
}
return(

<div className="page">

{/* MODAL */}

{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>
<span className="close"
onClick={()=>setModal({...modal,show:false})}>×</span>

<h3>{[Link]}</h3>
<p>{[Link]}</p>

<button onClick={()=>setModal({...modal,show:false})}>
OK
</button>
</div>
</div>
)}

<div className="auth">

{/* LEFT */}

<div className="left">
<img src={logo} alt="logo"/>
<h2>Reset Your Password Securely</h2>
<p>Verify your identity and update your password safely</p>
</div>

{/* RIGHT */}

<div className="right">

<div className="form">

<h2>Change Password</h2>

{/* EMAIL */}

<input
placeholder="Email"
onChange={(e)=>setEmail([Link])}
/>

{/* SEND OTP */}

{!otpSent && (
<button onClick={sendOtp}>Send OTP</button>
)}

{/* OTP BOXES */}

{otpSent && !otpVerified && (
<>
<div className="otp">
{[...Array(6)].map((_,i)=>(
<input
key={i}
maxLength="1"
ref={(el)=>[Link][i]=el}
onChange={(e)=>handleOtpChange([Link],i)}
onKeyDown={(e)=>handleKeyDown(e,i)}
/>
))}
</div>

<button onClick={verifyOtp}>Verify OTP</button>

</>
)}
{/* PASSWORD RESET */}
{otpVerified && (
<>
<div className="pass">
<input
type={showPassword?"text":"password"}
placeholder="New Password"
onFocus={()=>setShowRules(true)}
onBlur={()=>{ if(newPassword==="") setShowRules(false) }}
onChange={(e)=>{
setNewPassword([Link])
if([Link] !== "") setShowRules(true)
}}
/>

<span onClick={()=>setShowPassword(!showPassword)}>
{showPassword?"🙈":"👁"}
</span>
</div>

{/* RULES */}

{showRules && .every(Boolean) && (
<div className="rules">
<p className={[Link]?"ok":""}>• 8+ Characters</p>
<p className={[Link]?"ok":""}>• Uppercase</p>
<p className={[Link]?"ok":""}>• Lowercase</p>
<p className={[Link]?"ok":""}>• Number</p>
<p className={[Link]?"ok":""}>• Special Character</p>
</div>
)}

{[Link](checks).every(Boolean) && (
<p className="success-text">✔ Strong Password</p>
)}

<input
type={showPassword?"text":"password"}
placeholder="Confirm Password"
onChange={(e)=>setConfirmPassword([Link])}
/>

<button onClick={updatePassword}>
Update Password
</button>
</>
)}

</div>

</div>

</div>

</div>
)
}

export default ChangePassword

[Link]
import axios from "axios"
import {useState} from "react"
import { useNavigate } from "react-router-dom"
import "./[Link]"

function CreateGroup(){

const[groupName,setGroupName]=useState("")
const[description,setDescription]=useState("")

const navigate = useNavigate()

const[modal,setModal]=useState({
show:false,
title:"",
message:"",
type:""
})

/* ================= CREATE GROUP ================= */

const createGroup = async()=>{

/* VALIDATION */
if(![Link]()){
setModal({
show:true,
title:"Required",
message:"Group name is required",
type:"error"
})
return
}

try{

const token = [Link]("token")

const res = await [Link](

"[Link]
{
group_name:groupName,
description:description
},
{
headers:{ Authorization:`Bearer ${token}` }
}
)

/* SUCCESS MODAL */
setModal({
show:true,
title:"Success",
message:[Link] || "Group created successfully",
type:"success"
})

/* 🔥 CLEAR INPUTS */
setGroupName("")
setDescription("")

}catch(err){
setModal({
show:true,
title:"Error",
message:[Link]?.data?.message || "Group creation failed",
type:"error"
})

return(

<div className="creategroup-page">

{/* ================= MODAL ================= */}

{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>

<span
className="close"
onClick={()=>setModal({...modal,show:false})}
>
×
</span>

<h3>{[Link]}</h3>
<p>{[Link]}</p>

<button onClick={()=>setModal({...modal,show:false})}>
OK
</button>

</div>
</div>
)}

{/* ================= TOP NAV ================= */}

<div className="cg-topbar">

<button onClick={()=>navigate("/dashboard")}>
🏠 Home
</button>

<button onClick={()=>navigate("/groups")}>
👥 My Groups
</button>

</div>

{/* ================= CARD ================= */}

<div className="creategroup-card">

<div className="creategroup-header">

<h2>Create New Group</h2>

<p>
Create a secure collaboration group where members can share encrypted files.
</p>

</div>

<div className="form-container">
<input
className="group-input"
placeholder="Group name"
value={groupName}
onChange={(e)=>setGroupName([Link])}
/>

<textarea
className="group-textarea"
placeholder="Group purpose"
value={description}
onChange={(e)=>setDescription([Link])}
/>

<button
className="create-btn"
onClick={createGroup}
>
Create Group
</button>

</div>

</div>

</div>

export default CreateGroup

[Link]
import { useNavigate } from "react-router-dom"
import { useEffect, useState } from "react"
import "./[Link]"

import {
FaUpload,
FaFolderOpen,
FaUsers,
FaPlusCircle,
FaEnvelopeOpen,
FaShieldAlt,
FaUserCheck,
FaUserClock,
FaEdit,
FaSignOutAlt
} from "react-icons/fa"

function Dashboard(){

const navigate = useNavigate()

const role = [Link]("role")

const name = [Link]("name") || "User"

const [greeting,setGreeting] = useState("")

const [modal,setModal] = useState({
show:false,
title:"",
message:"",
type:""
})

useEffect(()=>{

const hour = new Date().getHours()

if(hour < 12) setGreeting("Good Morning")

else if(hour < 17) setGreeting("Good Afternoon")
else setGreeting("Good Evening")

},[])

return(

<div className="dashboard-container">
{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>

<span className="close"
onClick={()=>setModal({...modal,show:false})}>
×
</span>

<h3>{[Link]}</h3>

{/* 🔥 CLEAN LIST */}

<div className="modal-list">
{[Link]?.map((item,i)=>(
<div key={i} className="modal-item">
✔ {item}
</div>
))}
</div>

<button onClick={()=>setModal({...modal,show:false})}>
OK
</button>

</div>
</div>
)}

{/* HEADER CARD */}

<div className="header-card">

<div className="header-left">
<h2>Secure Cloud Share</h2>
</div>

<div className="header-right">

<button
className="security-btn"
onClick={()=>{
setModal({
show:true,
title:"Security Architecture",
type:"info",
content: [
" AES Encryption",
" MD5 Integrity Check",
" Merkle Tree Verification",
" Ring Signature (Anonymity)"
]
})
}}
>
Security Info
</button>

<button
className="logout-btn"
onClick={async ()=>{

const userId = [Link]("userId")

await fetch("[Link]
method:"POST",
headers:{ "Content-Type":"application/json" },
body:[Link]({userId})
})

[Link]()
navigate("/")

}}
>
<FaSignOutAlt /> Logout
</button>

</div>

</div>

{/* WELCOME HERO */}

<div className="welcome-card">

<h1>{greeting}, {name} 👋</h1>

<p>
Manage your secure files, groups, and access controls in one place
</p>

</div>

{/* GRID */}

<div className="dashboard-grid">

<div className="dashboard-card" onClick={()=>navigate("/upload")}>

<FaUpload className="card-icon"/>
<span>Upload Secure File</span>
</div>

<div className="dashboard-card" onClick={()=>navigate("/files")}>

<FaFolderOpen className="card-icon"/>
<span>My Files</span>
</div>

<div className="dashboard-card" onClick={()=>navigate("/groups")}>

<FaUsers className="card-icon"/>
<span>My Groups</span>
</div>

<div className="dashboard-card" onClick={()=>navigate("/create-group")}>

<FaPlusCircle className="card-icon"/>
<span>Create Group</span>
</div>

<div className="dashboard-card" onClick={()=>navigate("/invites")}>

<FaEnvelopeOpen className="card-icon"/>
<span>Invitations</span>
</div>

<div className="dashboard-card" onClick={()=>navigate("/active-groups")}>

<FaUserCheck className="card-icon"/>
<span>Active Groups</span>
</div>

<div className="dashboard-card" onClick={()=>navigate("/group-approvals")}>

<FaUserClock className="card-icon"/>
<span>Group Approvals</span>
</div>

<div className="dashboard-card" onClick={()=>navigate("/file-edit-approvals")}>

<FaEdit className="card-icon"/>
<span>File Edit Approvals</span>
</div>

{role === "auditor" && (

<div className="dashboard-card" onClick={()=>navigate("/audit/1")}>
<FaShieldAlt className="card-icon"/>
<span>Run Audit</span>
</div>
)}

</div>

</div>

}
export default Dashboard
[Link]
import { useEffect, useState } from "react"
import axios from "axios"
import { useParams } from "react-router-dom"

function FileDetails(){

const {id} = useParams()

const [file,setFile] = useState(null)

useEffect(()=>{

fetchFile()

},[])

const fetchFile = async ()=>{

try{

const res = await [Link](`[Link]

setFile([Link])

}catch(err){

[Link](err)

if(!file) return <div>Loading...</div>

return(

<div>

<h2>File Details</h2>

<p>File Name: {[Link]}</p>

<p>Blocks: {[Link]}</p>
<p>MD5 Hash: {[Link]}</p>
<p>Merkle Root: {file.merkle_root}</p>
<p>Ring Signature: {[Link]}</p>

</div>

export default FileDetails

[Link]
import {useEffect,useState} from "react"
import axios from "axios"
import { useNavigate } from "react-router-dom"
import "./[Link]"

function FileEditApprovals(){

const [requests,setRequests] = useState([])

const navigate = useNavigate()

const [modal,setModal] = useState({

show:false,
message:"",
type:""
})

useEffect(()=>{
loadRequests()
},[])

const loadRequests = async()=>{

try{
const token = [Link]("token")

const res = await [Link](

"[Link]
{ headers:{Authorization:`Bearer ${token}`} }
)

setRequests([Link] || [])

}catch{
setRequests([])
}
}

const approve = async(id)=>{

try{

const token = [Link]("token")

await [Link](
`[Link]
{},
{ headers:{Authorization:`Bearer ${token}`} }
)

setModal({
show:true,
message:"Edit approved successfully",
type:"success"
})

loadRequests()

}catch{
setModal({
show:true,
message:"Failed to approve request",
type:"error"
})
}
}

return(

<div className="file-approvals-page">

{/* MODAL */}

{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>
<span className="close" onClick={()=>setModal({...modal,show:false})}>×</span>
<p>{[Link]}</p>
<button onClick={()=>setModal({...modal,show:false})}>OK</button>
</div>
</div>
)}

{/* TOP CARD */}

<div className="top-card">

<h2>File Edit Approvals</h2>

<div className="top-actions">
<button onClick={()=>navigate("/dashboard")}>🏠 Home</button>
<button onClick={()=>navigate("/files")}>📁 My Files</button>
</div>

</div>

{/* LIST CARD */}

<div className="approvals-card">

<div className="approvals-list">

{[Link] === 0 ? (

<p className="empty">No edit requests</p>

) : (

[Link](r => (

<div className="approval-item" key={[Link]}>

<div className="group-left">

<h3>📄 {[Link]}</h3>
<p className="desc">Requested by: {[Link]}</p>

</div>

<div className="group-right">

<button
className="btn approve"
onClick={()=>approve([Link])}
>
Approve
</button>

</div>

</div>

))
)}

</div>

</div>

</div>

export default FileEditApprovals

[Link]
import { useEffect, useState } from "react"
import axios from "axios"
import { useNavigate } from "react-router-dom"
import "./[Link]"

function Files(){

const [files,setFiles] = useState([])

const navigate = useNavigate()

const [modal,setModal] = useState({

show:false,
title:"",
message:"",
type:"",
onConfirm:null
})

useEffect(()=>{
fetchFiles()
},[])

const fetchFiles = async ()=>{

try{
const token = [Link]("token")

const res = await [Link](

"[Link]
{
headers:{ Authorization:`Bearer ${token}` }
}
)

setFiles([Link])

}catch{
setModal({
show:true,
title:"Error",
message:"Failed to load files",
type:"error"
})
}

/* ================= DOWNLOAD ================= */

const downloadFile = async(id,filename)=>{

try{

const token = [Link]("token")

const res = await [Link](

`[Link]
{
headers:{ Authorization:`Bearer ${token}` },
responseType:"blob"
}
)
 const url = [Link](new Blob([[Link]]))

const link = [Link]("a")

[Link] = url
[Link]("download",filename)

[Link](link)
[Link]()

}catch{
setModal({
show:true,
title:"Error",
message:"Download failed",
type:"error"
})
}

/* ================= PREVIEW (FIXED) ================= */

const previewFile = async(id)=>{

try{

const token = [Link]("token")

const res = await [Link](

`[Link]
{
headers:{ Authorization:`Bearer ${token}` },
responseType:"blob"
}
)

const fileURL = [Link]([Link])

[Link](fileURL,"_blank")

}catch{
setModal({
show:true,
title:"Error",
message:"Preview failed",
type:"error"
})
}

/* ================= DELETE ================= */

const deleteFile = (id)=>{

setModal({
show:true,
title:"Delete File",
message:"Are you sure you want to delete this file?",
type:"confirm",
onConfirm: async()=>{

try{

const token = [Link]("token")

await [Link](`[Link]
headers:{ Authorization:`Bearer ${token}` }
})
 fetchFiles()

setModal({
show:true,
title:"Deleted",
message:"File deleted successfully",
type:"success"
})

}catch{
setModal({
show:true,
title:"Error",
message:"Failed to delete file",
type:"error"
})
}

}
})

return(

<div className="files-page">

{/* ================= MODAL ================= */}

{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>

<span className="close"
onClick={()=>setModal({...modal,show:false})}>
×
</span>

<h3>{[Link]}</h3>
<p>{[Link]}</p>

<div className="modal-actions">

{[Link]==="confirm" ? (
<>
<button
onClick={()=>setModal({...modal,show:false})}
>
Cancel
</button>

<button
onClick={async ()=>{
await [Link]()
}}
>
Delete
</button>
</>
):(
<button
onClick={()=>setModal({...modal,show:false})}
>
OK
</button>
)}
</div>

</div>
</div>
)}

{/* ================= TOPBAR ================= */}

<div className="files-topbar">

<button onClick={()=>navigate("/dashboard")}>
🏠 Home
</button>

<button onClick={()=>navigate("/upload")}>
⬆ Upload
</button>

</div>

{/* ================= MAIN CARD ================= */}

<div className="files-card">

<div className="files-header">
<h2>My Files</h2>
<p>Your encrypted personal cloud storage</p>
</div>

<div className="files-grid">

{[Link] === 0 ? (
<p style={{color:"#cbd5f5"}}>No files uploaded yet</p>
) : (

[Link](file=>(

<div className="file-card" key={[Link]}>

<div className="file-name">
📄 {[Link]}
</div>

<div className="file-meta">
Blocks: {[Link]}
</div>

<div className="file-actions">

<button
className="preview-btn"
onClick={()=>previewFile([Link])}
>
Preview
</button>

<button
className="download-btn"
onClick={()=>downloadFile([Link],[Link])}
>
Download
</button>

<button
className="delete-btn"
onClick={()=>deleteFile([Link])}
>
Delete
</button>
</div>

</div>

))

)}

</div>

</div>

</div>
)

export default Files

[Link]
import {useEffect,useState} from "react"
import axios from "axios"
import { useNavigate } from "react-router-dom"
import "./[Link]"

function GroupApprovals(){

const [requests,setRequests] = useState([])

const navigate = useNavigate()

const [modal,setModal] = useState({

show:false,
title:"",
message:"",
type:""
})

useEffect(()=>{
loadRequests()
},[])

const loadRequests = async()=>{

try{

const token = [Link]("token")

const res = await [Link](

"[Link]
{headers:{Authorization:`Bearer ${token}`}}
)

setRequests([Link] || [])

}catch{
setRequests([])
}

/* APPROVE */
const approve = async(id)=>{

try{

const token = [Link]("token")

await [Link](
`[Link]
{},
{headers:{Authorization:`Bearer ${token}`}}
)

setModal({
show:true,
title:"Approved",
message:"User added to group",
type:"success"
})

loadRequests()
}catch{

setModal({
show:true,
title:"Error",
message:"Approval failed",
type:"error"
})

/* REJECT */
const reject = async(id)=>{

try{

const token = [Link]("token")

await [Link](
`[Link]
{},
{headers:{Authorization:`Bearer ${token}`}}
)

setModal({
show:true,
title:"Rejected",
message:"Request rejected successfully",
type:"success"
})

loadRequests()

}catch{

setModal({
show:true,
title:"Error",
message:"Reject failed",
type:"error"
})

return(

<div className="approvals-page">

{/* MODAL */}

{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>

<span className="close"
onClick={()=>setModal({...modal,show:false})}>
×
</span>

<h3>{[Link]}</h3>
<p>{[Link]}</p>

<button onClick={()=>setModal({...modal,show:false})}>
OK
</button>

</div>
</div>
)}

{/* TOPBAR */}

<div className="approvals-topbar">

<button onClick={()=>navigate("/dashboard")}>
🏠 Home
</button>

<button onClick={()=>navigate("/groups")}>
👥 Groups
</button>

</div>

<div className="approvals-card">

<div className="approvals-header">
<h2>Group Join Requests</h2>
<p>Approve or reject users requesting to join your groups.</p>
</div>

<div className="approvals-list">

{[Link] === 0 ? (

<div className="empty-state">
No pending requests
</div>

) : (

[Link](r => (

<div className="approval-item" key={[Link]}>

<div className="approval-left">

<h3>👥 {r.group_name}</h3>
<p>👤 {[Link]} wants to join</p>

</div>

<div className="approval-actions">

<button
className="approve-btn"
onClick={()=>approve([Link])}
>
Approve
</button>

<button
className="reject-btn"
onClick={()=>reject([Link])}
>
Reject
</button>

</div>

</div>
))

)}

</div>

</div>

</div>

export default GroupApprovals

[Link]
import axios from "axios"
import {useEffect,useState} from "react"
import {useParams,useNavigate} from "react-router-dom"
import "./[Link]"

function GroupFiles(){

const {id}=useParams()
const navigate = useNavigate()

const [files,setFiles]=useState([])
const [modal,setModal]=useState({show:false,message:"",type:""})
const [editModal,setEditModal]=useState(false)
const [selectedFile,setSelectedFile]=useState(null)
const [editText,setEditText]=useState("")

useEffect(()=>{
loadFiles()
},[])

const loadFiles=async()=>{

try{
const token = [Link]("token")

const res = await [Link](

`[Link]
{ headers:{Authorization:`Bearer ${token}`} }
)

setFiles([Link] || [])

}catch{
setFiles([])
}
}

/* VIEW */
const viewFile = async(file)=>{
try{
const token = [Link]("token")

const res = await [Link](

`[Link]
{
headers:{Authorization:`Bearer ${token}`},
responseType:"blob"
}
)

const fileURL = [Link]([Link])

[Link](fileURL)

}catch{}
}

/* OPEN EDIT */
const openEditModal=(file)=>{
if(![Link](".pdf")){
setModal({show:true,message:"Only PDF files can be edited",type:"error"})
return
}
setSelectedFile(file)
setEditModal(true)
}

/* REQUEST EDIT */
const requestEdit = async()=>{

try{
const token = [Link]("token")

await [Link](
`[Link]
{},
{ headers:{Authorization:`Bearer ${token}`} }
)

setModal({show:true,message:"Request sent to owner",type:"success"})

setEditModal(false)

}catch{
setModal({show:true,message:"Request failed",type:"error"})
}
}

/* EDIT FILE */
const editFile = async()=>{

if(!editText){
setModal({show:true,message:"Enter text first",type:"error"})
return
}

try{
const token = [Link]("token")

const res = await [Link](

`[Link]
{ text:editText },
{ headers:{Authorization:`Bearer ${token}`} }
)

setModal({show:true,message:[Link],type:"success"})
setEditModal(false)
setEditText("")

}catch{
setModal({show:true,message:"Edit failed",type:"error"})
}
}

/* DELETE */
const deleteFile = async(fileId)=>{

try{
const token = [Link]("token")

await [Link](
`[Link]
{ headers:{Authorization:`Bearer ${token}`} }
)

setModal({show:true,message:"File deleted",type:"success"})
loadFiles()

}catch{
setModal({show:true,message:"Delete failed",type:"error"})
}
}

return(

<div className="groupfiles-page">

{/* MODAL */}

{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>
<span className="close" onClick={()=>setModal({...modal,show:false})}>×</span>
<p>{[Link]}</p>
<button onClick={()=>setModal({...modal,show:false})}>OK</button>
</div>
</div>
)}

{/* TOP CARD */}

<div className="top-card">

<h2>Group Files</h2>

<div className="top-actions">
<button onClick={()=>navigate("/groups")}>👥 Groups</button>
<button onClick={()=>navigate("/dashboard")}>🏠 Home</button>
</div>

</div>

{/* MAIN CARD */}

<div className="files-card">

<div className="files-list">

{[Link]===0 ? (
<p className="empty">No files found</p>
) : (

[Link](file=>(

<div className="file-item" key={[Link]}>

<div className="file-left">

<h3>📄 {[Link]}</h3>
<p className="meta">Uploaded by: {file.anonymous_name}</p>
<p className="meta">Blocks: {[Link]}</p>

</div>

<div className="file-right">

<button className="btn view" onClick={()=>viewFile(file)}>View</button>

<button className="btn audit"

onClick={()=>navigate(`/audit/${[Link]}`)}>
Audit
</button>

<button className="btn edit"

onClick={()=>openEditModal(file)}>
Edit
</button>

<button className="btn delete"

onClick={()=>deleteFile([Link])}>
Delete
</button>

</div>

</div>

))

)}

</div>

</div>

{/* EDIT MODAL */}

{editModal && (
<div className="modal">

<div className="modal-box">

<h3>Edit File</h3>

<textarea
placeholder="Enter text to add..."
value={editText}
onChange={(e)=>setEditText([Link])}
/>

<div className="modal-actions">

<button className="btn request" onClick={requestEdit}>

Request Approval
</button>

<button className="btn edit" onClick={editFile}>

Edit Now
</button>

<button className="btn cancel"

onClick={()=>setEditModal(false)}>
Cancel
</button>

</div>

</div>

</div>
)}

</div>

export default GroupFiles

[Link]
import axios from "axios"
import {useEffect,useState} from "react"
import {useNavigate} from "react-router-dom"
import "./[Link]"

function Groups(){

const [groups,setGroups] = useState([])

const navigate = useNavigate()

const userId = [Link]("userId")

useEffect(()=>{
fetchGroups()
},[])

const fetchGroups = async()=>{

try{

const token = [Link]("token")

const res = await [Link](

"[Link]
{
headers:{Authorization:`Bearer ${token}`}
}
)

setGroups([Link] || [])

}catch{
setGroups([])
}

return(

<div className="groups-page">

{/* TOP CARD */}

<div className="top-card">

<h2>My Groups</h2>

<div className="top-actions">

<button onClick={()=>navigate("/dashboard")}>
🏠 Home
</button>

<button onClick={()=>navigate("/active-groups")}>
🌐 Explore Groups
</button>

</div>

</div>

{/* MAIN CARD */}

<div className="groups-card">
<p className="subtitle">
Collaborative groups where members can securely share files
</p>

<div className="groups-list">

{[Link] === 0 ? (

<p className="empty">No groups found</p>

) : (

[Link](g=>(

<div className="group-item" key={[Link]}>

<div className="group-left">

<h3>👥 {g.group_name}</h3>

{g.creator_id == userId && (

<span className="owner-tag">Owner</span>
)}

</div>

<div className="group-right">

{/* ✅ ONLY OWNER CAN INVITE */}

{g.creator_id == userId && (

<button
className="btn invite"
onClick={()=>navigate(`/invite/${[Link]}`)}
>
Invite User
</button>

)}

<button
className="btn files"
onClick={()=>navigate(`/group-files/${[Link]}`)}
>
View Files
</button>

</div>

</div>

))

)}

</div>

</div>

</div>

export default Groups

[Link]
import axios from "axios"
import { useEffect, useState } from "react"
import { useNavigate } from "react-router-dom"
import "./[Link]"

function Invites(){

const [invites,setInvites] = useState([])

const navigate = useNavigate()

const [modal,setModal] = useState({

show:false,
title:"",
message:"",
type:""
})

useEffect(()=>{
loadInvites()
},[])

/* LOAD INVITES */
const loadInvites = async()=>{

try{

const token = [Link]("token")

const res = await [Link](

"[Link]
{
headers:{Authorization:`Bearer ${token}`}
}
)

setInvites([Link] || [])

}catch{
setInvites([])
}

/* ACCEPT INVITE */
const accept = async(id)=>{

try{

const token = [Link]("token")

await [Link](
`[Link]
{},
{
headers:{Authorization:`Bearer ${token}`}
}
)

setModal({
show:true,
title:"Success",
message:"You joined the group successfully",
type:"success"
})

loadInvites()

}catch{

setModal({
show:true,
title:"Error",
message:"Failed to join group",
type:"error"
})

return(

<div className="invites-page">

{/* MODAL */}

{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>

<span
className="close"
onClick={()=>setModal({...modal,show:false})}
>
×
</span>

<h3>{[Link]}</h3>
<p>{[Link]}</p>

<button onClick={()=>setModal({...modal,show:false})}>
OK
</button>

</div>
</div>
)}

{/* TOPBAR */}

<div className="invites-topbar">

<button onClick={()=>navigate("/dashboard")}>
🏠 Home
</button>

<button onClick={()=>navigate("/groups")}>
👥 Groups
</button>

</div>

{/* CARD */}

<div className="invites-card">

<div className="invites-header">
<h2>Group Invitations</h2>
<p>Groups that invited you to collaborate.</p>
</div>

{/* LIST */}

<div className="invites-list">

{[Link] === 0 ? (

<div className="empty-state">
No invitations available
</div>

) : (

[Link](i => (

<div className="invite-item" key={[Link]}>

{/* LEFT */}

<div className="invite-left">

<h3 className="group-title">
👥 {i.group_name}
</h3>

<p className="group-desc">
{[Link] || "No purpose provided"}
</p>

</div>

{/* RIGHT */}

<div className="invite-right">

<button
className="accept-btn"
onClick={()=>accept([Link])}
>
Accept
</button>

</div>

</div>

))

)}

</div>

</div>

</div>

export default Invites

[Link]
import axios from "axios"
import {useState} from "react"
import {useParams, useNavigate} from "react-router-dom"
import "./[Link]"

function InviteUser(){

const[email,setEmail]=useState("")
const {groupId} = useParams()
const navigate = useNavigate()

const [loading,setLoading] = useState(false)

const [modal,setModal] = useState({

show:false,
message:"",
type:""
})

const invite = async()=>{

if(!email){
setModal({
show:true,
message:"Please enter email address",
type:"error"
})
return
}

try{

setLoading(true)

const token = [Link]("token")

await [Link](
"[Link]
{
group_id:groupId,
email:email
},
{
headers:{Authorization:`Bearer ${token}`}
}
)

setModal({
show:true,
message:"Invitation sent successfully",
type:"success"
})

setEmail("")

}catch(err){

setModal({
show:true,
message: [Link]?.data?.message || "Failed to send invitation",
type:"error"
})
}

setLoading(false)

return(

<div className="invite-page">

{/* MODAL */}

{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>

<span
className="close"
onClick={()=>setModal({...modal,show:false})}
>
×
</span>

<h3>
{[Link] === "success" ? "⚠️
Success" : " Error"}
</h3>

<p>{[Link]}</p>

<button onClick={()=>setModal({...modal,show:false})}>
OK
</button>

</div>
</div>
)}

{/* TOP BAR */}

<div className="invite-top">

<button onClick={()=>navigate(-1)}>
⬅ Back
</button>

</div>

{/* CARD */}

<div className="invite-card">

<h2>📩 Invite User</h2>

<p className="subtitle">
Invite a member to collaborate securely in your group
</p>

<div className="group-id">
<span>Group ID:</span> {groupId}
</div>

<div className="invite-form">

<div className="email-input-wrapper">

<span className="email-icon">📧</span>

<input
className="email-input"
value={email}
placeholder="Enter user email address"
onChange={(e)=>setEmail([Link])}
/>

</div>

<button
className="invite-btn"
onClick={invite}
disabled={loading}
>
{loading ? "Sending..." : "Send Invitation"}
</button>

</div>

</div>

</div>

export default InviteUser

[Link]
import axios from "axios"
import { useState } from "react"
import { useNavigate, Link } from "react-router-dom"
import logo from "../assets/[Link]";
import "./[Link]"

function Login(){

const[email,setEmail] = useState("")
const[password,setPassword] = useState("")
const[loading,setLoading] = useState(false)
const[showPassword,setShowPassword] = useState(false)

const[errors,setErrors] = useState({})

const[modal,setModal] = useState({
show:false,
title:"",
message:"",
type:""
})

const navigate = useNavigate()

/* VALIDATION */
const validate = ()=>{
let err = {}

if(!email) [Link] = "Email required"

if(!password) [Link] = "Password required"

setErrors(err)
return [Link](err).length === 0
}

/* LOGIN */
const login = async()=>{

if(!validate()){
setModal({
show:true,
title:"Invalid Input",
message:"Please fill all required fields.",
type:"error"
})
return
}

try{

setLoading(true)

const res = await [Link](

"[Link]
{ email, password }
)

/* STORE DATA */
[Link]("token",[Link])
[Link]("role",[Link])
[Link]("name",[Link])
[Link]("userId",[Link])
/* SUCCESS */
setModal({
show:true,
title:"Login Successful",
message:"Welcome back!",
type:"success"
})

setTimeout(()=>{
if([Link] === "admin"){
navigate("/admin")
}else{
navigate("/dashboard")
}
},1200)

}catch(err){

const msg =
[Link]?.data?.message || "Login failed"

setModal({
show:true,
title:"Login Failed",
message:msg,
type:"error"
})

setLoading(false)
}

return(

<div className="page">

{/* MODAL */}

{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>
<span className="close"
onClick={()=>setModal({...modal,show:false})}>×</span>

<h3>{[Link]}</h3>
<p>{[Link]}</p>

<button onClick={()=>setModal({...modal,show:false})}>
OK
</button>
</div>
</div>
)}

<div className="auth">

{/* LEFT */}

<div className="left">
<img src={logo} alt="logo"/>
<h2>Secure Access to Your Cloud</h2>
<p>Login to continue secure and anonymous data sharing</p>
</div>

{/* RIGHT */}

<div className="right">
<div className="form">

<h2>Login</h2>

{/* EMAIL */}

<input
type="email"
className={[Link]?"err":""}
placeholder="Email"
value={email}
onChange={(e)=>setEmail([Link])}
/>
{[Link] && <span className="error-text">{[Link]}</span>}

{/* PASSWORD */}

<div className="pass">
<input
type={showPassword ? "text" : "password"}
className={[Link]?"err":""}
placeholder="Password"
value={password}
onChange={(e)=>setPassword([Link])}
/>

<span onClick={()=>setShowPassword(!showPassword)}>
{showPassword ? "🙈" : "👁"}
</span>
</div>
{[Link] && <span className="error-text">{[Link]}</span>}

{/* BUTTON */}

<button onClick={login} disabled={loading}>
{loading ? "Logging in..." : "Login"}
</button>

{/* FORGOT */}

<p className="link-text">
<Link to="/change-password">
Forgot / Change Password ?
</Link>
</p>

{/* SWITCH */}

<p>
Don't have an account?
<Link to="/register"> Register</Link>
</p>

</div>

</div>

</div>

</div>
)
}

export default Login

[Link]
import axios from "axios"
import { useState, useRef } from "react"
import { useNavigate, Link } from "react-router-dom"
import logo from "../assets/[Link]";
import "./[Link]"

function Register(){

const[name,setName]=useState("")
const[email,setEmail]=useState("")
const[password,setPassword]=useState("")
const[showPassword,setShowPassword]=useState(false)
const[showRules,setShowRules]=useState(false)

const role = "user"

const[otp,setOtp]=useState("")
const[otpSent,setOtpSent]=useState(false)

const[errors,setErrors]=useState({})
const[modal,setModal]=useState({
show:false,
title:"",
message:"",
type:""
})

const navigate = useNavigate()

const otpRefs = useRef([])

/* PASSWORD CHECKS */
const checks = {
length: [Link] >= 8,
upper: /[A-Z]/.test(password),
lower: /[a-z]/.test(password),
number: /\d/.test(password),
special: /[@$!%*?&]/.test(password)
}

/* VALIDATION */
const validateFields = ()=>{
let err = {}

if(!name) [Link]="Name required"

if(!email) [Link]="Email required"
if(!password) [Link]="Password required"

setErrors(err)
return [Link](err).length===0
}

/* OTP INPUT */
const handleOtpChange = (value,index)=>{
if(!/^[0-9]?$/.test(value)) return

let arr = [Link]("")

arr[index] = value
setOtp([Link](""))

if(value && index < 5){

[Link][index+1].focus()
}
}

/* BACKSPACE HANDLER */
const handleKeyDown = (e,index)=>{
if([Link] === "Backspace"){
let arr = [Link]("")

if(arr[index]){
arr[index] = ""
setOtp([Link](""))
}else if(index > 0){
[Link][index-1].focus()
}
}
}

/* SEND OTP */
const sendOtp = async()=>{

if(!validateFields()){
setModal({
show:true,
title:"Invalid Input",
message:"Please fill all required fields.",
type:"error"
})
return
}

if(.every(Boolean)){
setModal({
show:true,
title:"Weak Password",
message:"Password must meet all requirements.",
type:"error"
})
return
}

try{
await [Link]("[Link]
{name,email,password,role})

setOtpSent(true)

setModal({
show:true,
title:"OTP Sent",
message:"Check your email for OTP.",
type:"success"
})

}catch{
setModal({
show:true,
title:"Error",
message:"Failed to send OTP.",
type:"error"
})
}
}

/* VERIFY OTP */
const verifyOtp = async()=>{

if(!otp || [Link] !== 6){

setModal({
show:true,
title:"OTP Required",
message:"Please enter valid 6-digit OTP.",
type:"error"
})
return
}

try{
const res = await [Link](
"[Link]
{name,email,password,role,otp}
)

if([Link]==="User created"){
setModal({
show:true,
title:"Success",
message:"Account created successfully!",
type:"success"
})

setTimeout(()=>navigate("/login"),1500)

}else{
setModal({
show:true,
title:"Invalid OTP",
message:[Link],
type:"error"
})
}

}catch(err){

// 🔥 THIS IS THE FIX

const msg =
[Link]?.data?.message || "Invalid or expired OTP"

setModal({
show:true,
title:"Invalid OTP",
message:msg,
type:"error"
})

}
}

return(

<div className="page">

{/* MODAL */}

{[Link] && (
<div className="modal">
<div className={`modal-box ${[Link]}`}>
<span className="close"
onClick={()=>setModal({...modal,show:false})}>×</span>

<h3>{[Link]}</h3>
<p>{[Link]}</p>

<button onClick={()=>setModal({...modal,show:false})}>
OK
</button>
</div>
</div>
)}

<div className="auth">

{/* LEFT */}

<div className="left">
<img src={logo} alt="logo"/>
<h2>Collaborate Without Revealing Identity</h2>
<p>Secure group-based data sharing in the cloud</p>
</div>

{/* RIGHT */}

<div className="right">

<div className="form">

<h2>Create Account</h2>

<input
className={[Link]?"err":""}
placeholder="Full Name"
onChange={(e)=>setName([Link])}
/>
{[Link] && <span className="error-text">{[Link]}</span>}

<input
className={[Link]?"err":""}
placeholder="Email"
onChange={(e)=>setEmail([Link])}
/>
{[Link] && <span className="error-text">{[Link]}</span>}

<div className="pass">
<input
type={showPassword?"text":"password"}
className={[Link]?"err":""}
placeholder="Password"
onFocus={()=>setShowRules(true)}
onBlur={()=>{ if(password==="") setShowRules(false) }}
onChange={(e)=>{
setPassword([Link])
if([Link] !== "") setShowRules(true)
}}
/>

<span onClick={()=>setShowPassword(!showPassword)}>
{showPassword?"🙈":"👁"}
</span>
</div>

{/* RULES */}

{showRules && .every(Boolean) && (
<div className="rules">
<p className={[Link]?"ok":""}>• 8+ Characters</p>
<p className={[Link]?"ok":""}>• Uppercase Letter</p>
<p className={[Link]?"ok":""}>• Lowercase Letter</p>
<p className={[Link]?"ok":""}>• Number</p>
<p className={[Link]?"ok":""}>• Special Character</p>
</div>
)}

{/* SUCCESS */}

{[Link](checks).every(Boolean) && (
<p className="success-text">✔ Strong Password</p>
)}
{[Link] && <span className="error-text">{[Link]}</span>}

{/* OTP */}

{!otpSent ? (
<button onClick={sendOtp}>Send OTP</button>
):(
<>
<div className="otp">
{[...Array(6)].map((_,i)=>(
<input
key={i}
maxLength="1"
ref={(el)=>[Link][i]=el}
onChange={(e)=>handleOtpChange([Link],i)}
onKeyDown={(e)=>handleKeyDown(e,i)}
/>
))}
</div>

<button onClick={verifyOtp}>Verify OTP</button>

<button className="link-btn" onClick={sendOtp}>

Resend OTP
</button>
</>
)}

<p>
Already have account? <Link to="/login">Login</Link>
</p>

</div>
</div>
</div>
</div>
)
}

export default Register

 CSS FILES
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE */
.groups-page{
min-height:100vh;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
display:flex;
flex-direction:column;
align-items:center;
padding:40px 20px;
}

/* ✅ TOP CARD */
.top-card{
width:100%;
max-width:900px;
background:white;
border-radius:16px;
padding:20px 30px;
margin-bottom:20px;

display:flex;
justify-content:space-between;
align-items:center;

box-shadow:0 10px 30px rgba(0,0,0,0.1);

}

.top-card h2{
color:#1e293b;
}

/* ACTION BUTTONS */
.top-actions{
display:flex;
gap:10px;
}

.top-actions button{
padding:10px 18px;
border:none;
border-radius:10px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
cursor:pointer;
font-weight:500;
}

/* ✅ MAIN CARD */
.groups-card{
width:100%;
max-width:900px;
background:white;
border-radius:16px;
padding:25px;

box-shadow:0 15px 40px rgba(0,0,0,0.1);

}

/* SUBTITLE */
.subtitle{
color:#64748b;
margin-bottom:20px;
}

/* LIST */
.groups-list{
display:flex;
flex-direction:column;
gap:15px;
}

/* ITEM */
.group-item{
display:flex;
justify-content:space-between;
align-items:center;

background:#f8fafc;
padding:18px;

border-radius:12px;
border:1px solid #e2e8f0;
}

/* LEFT */
.group-left h3{
color:#1e293b;
}

.desc{
color:#64748b;
font-size:13px;
margin-top:4px;
}

.creator{
font-size:12px;
color:#94a3b8;
margin-top:4px;
}

/* BUTTON BASE */
.btn{
padding:8px 16px;
border:none;
border-radius:8px;
color:white;
cursor:pointer;
font-size:13px;
}

/* STATES */
.[Link]{ background:#0ea5e9; }
.[Link]{ background:#f59e0b; cursor:not-allowed; }
.[Link]{ background:#22c55e; cursor:not-allowed; }
.[Link]{ background:#ef4444; }

/* EMPTY */
.empty{
text-align:center;
color:#64748b;
padding:20px;
}

/* MODAL */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:flex;
justify-content:center;
align-items:center;
}

.modal-box{
background:white;
padding:25px;
border-radius:12px;
width:300px;
text-align:center;
position:relative;
}

.[Link]{
border-top:5px solid #22c55e;
}

.[Link]{
border-top:5px solid #ef4444;
}

.close{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
}

.modal-box button{
margin-top:10px;
padding:10px;
width:100%;
background:#0ea5e9;
color:white;
border:none;
border-radius:8px;
}
[Link]
/* GLOBAL */
.adminPage{
min-height:100vh;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
padding:30px;
}

/* HEADER */
.adminHeader{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

.adminHeader h2{
color:#1e293b;
}

.adminHeader button{
padding:10px 20px;
border:none;
border-radius:10px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
cursor:pointer;
display:flex;
gap:6px;
align-items:center;
}

/* DASH CARDS */
.cardGrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-bottom:25px;
}

.dashCard{
background:white;
padding:18px;
border-radius:14px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
font-weight:500;

box-shadow:0 10px 25px rgba(0,0,0,0.1);

transition:0.25s;
}

.dashCard:hover{
transform:translateY(-4px);
}

/* SECTION CARD */
.adminSection{
background:white;
padding:25px;
border-radius:16px;
box-shadow:0 15px 35px rgba(0,0,0,0.1);
}

/* TABLE */
.adminTable{
width:100%;
border-collapse:collapse;
margin-top:10px;
}

.adminTable th{
background:#f1f5f9;
padding:12px;
text-align:left;
color:#1e293b;
}

.adminTable td{
padding:12px;
border-bottom:1px solid #e2e8f0;
color:#334155;
}

.adminTable tr:hover{
background:#f8fafc;
}

/* BUTTONS */
button{
border:none;
padding:8px 14px;
border-radius:8px;
cursor:pointer;
margin-right:6px;
font-size:13px;
color:white;
}

/* COLORS */
.green{
background:#22c55e;
}

.red{
background:#ef4444;
}

.orange{
background:#f59e0b;
}

/* MODAL */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:flex;
justify-content:center;
align-items:center;
}

.modal-box{
background:white;
padding:25px;
border-radius:14px;
width:300px;
text-align:center;
position:relative;
}

.modal-box span{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
}

.modal-box button{
margin-top:10px;
width:100%;
background:#0ea5e9;
}
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE */
.audit-page{
min-height:100vh;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
display:flex;
flex-direction:column;
align-items:center;
padding:30px;
}

/* TOP BAR */
.audit-top{
width:100%;
max-width:800px;
margin-bottom:20px;
}

.audit-top button{
padding:10px 18px;
border:none;
border-radius:10px;
background:#0ea5e9;
color:white;
cursor:pointer;
font-weight:500;
}

/* CARD */
.audit-card{
width:100%;
max-width:600px;
background:white;
padding:40px;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,0.15);
text-align:center;
}

/* HEADER */
.audit-card h2{
color:#1e293b;
margin-bottom:10px;
}

.subtitle{
color:#64748b;
font-size:14px;
margin-bottom:25px;
}

/* FILE ID */
.file-id{
background:#f1f5f9;
padding:10px;
border-radius:10px;
margin-bottom:25px;
font-size:14px;
color:#334155;
}

.file-id span{
font-weight:600;
}

/* BUTTON */
.audit-btn{
padding:14px;
width:100%;
border:none;
border-radius:12px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
font-size:15px;
cursor:pointer;
transition:0.3s;
}

.audit-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(14,165,233,0.4);
}

.audit-btn:disabled{
opacity:0.6;
cursor:not-allowed;
}

/* LOADING */
.loading{
margin-top:15px;
color:#0ea5e9;
font-size:14px;
}

/* MODAL */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:flex;
justify-content:center;
align-items:center;
z-index:1000;
}

.modal-box{
background:white;
padding:25px;
border-radius:16px;
width:320px;
text-align:center;
position:relative;
animation:fadeIn 0.3s ease;
}

/* TYPES */
.[Link]{
border-top:5px solid #22c55e;
}
.[Link]{
border-top:5px solid #ef4444;
}

/* CLOSE */
.close{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
font-size:18px;
}

/* MODAL TEXT */
.modal-box h3{
margin-bottom:10px;
color:#1e293b;
}

.modal-box p{
color:#64748b;
font-size:14px;
}

/* BUTTON */
.modal-box button{
margin-top:15px;
padding:10px;
width:100%;
background:#0ea5e9;
color:white;
border:none;
border-radius:10px;
cursor:pointer;
}

/* ANIMATION */
@keyframes fadeIn{
from{
opacity:0;
transform:scale(0.9);
}
to{
opacity:1;
transform:scale(1);
}
}

/* RESPONSIVE */
@media(max-width:600px){

.audit-card{
padding:25px;
}

}
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE BACKGROUND */
.page{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
}

/* MAIN CARD */
.auth{
width:85%;
height:85vh;
display:flex;
border-radius:20px;
overflow:hidden;
box-shadow:0 30px 60px rgba(0,0,0,0.2);
background:white;
}

/* LEFT */
.left{
width:40%;
background:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
}

.left img{
width:160px;
margin-bottom:20px;
}

.left h1{
font-size:28px;
color:#0f172a;
}

.left p{
color:#64748b;
}

/* RIGHT */
.right{
width:60%;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
}
/* FORM CARD */
.form{
width:360px;
background:white;
padding:30px;
border-radius:15px;
box-shadow:0 15px 30px rgba(0,0,0,0.2);
}

.form h2{
text-align:center;
margin-bottom:20px;
}

/* INPUT */
input{
width:100%;
padding:12px;
margin-top:10px;
border:1px solid #ccc;
border-radius:8px;
outline:none;
}

input:focus{
border-color:#0ea5e9;
}

/* ERROR */
.err{
border:1px solid red;
}

/* PASSWORD */
.pass{
position:relative;
}

.pass span{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
}

/* BUTTON */
button{
width:100%;
padding:12px;
margin-top:15px;
background:#0ea5e9;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}

button:hover{
background:#0284c7;
}

/* LINK BUTTON */
.link-btn{
background:none;
color:#0ea5e9;
}
/* OTP */
.otp{
display:flex;
justify-content:space-between;
margin-top:10px;
}

.otp input{
width:45px;
height:45px;
text-align:center;
font-size:18px;
border-radius:10px;
border:1px solid #ccc;
}

/* MODAL */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
backdrop-filter:blur(5px);
}

.modal-box{
background:white;
padding:25px;
border-radius:12px;
width:300px;
text-align:center;
position:relative;
animation:pop 0.3s ease;
}

.modal-box span{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
}

/* MODAL TYPES */
.[Link]{
border-top:5px solid #22c55e;
}

.[Link]{
border-top:5px solid #ef4444;
}

/* MODAL BUTTON */
.modal-box button{
margin-top:15px;
padding:10px;
background:#0ea5e9;
border:none;
color:white;
border-radius:8px;
cursor:pointer;
}

@keyframes pop{
from{transform:scale(0.8);opacity:0;}
to{transform:scale(1);opacity:1;}
}

/* ERROR TEXT */
.error-text{
color:red;
font-size:12px;
margin-top:5px;
display:block;
}

/* PASSWORD RULES */
.rules{
margin-top:10px;
font-size:12px;
color:#64748b;
}

@keyframes fadeIn{
from{opacity:0; transform:translateY(-5px);}
to{opacity:1; transform:translateY(0);}
}

.rules p{
margin:2px 0;
}

.rules .ok{
color:green;
font-weight:500;
}

.success-text{
color:green;
font-size:13px;
margin-top:6px;
font-weight:500;
}

/* spacing fix */
.form input{
margin-top:10px;
}

/* better button spacing */

.form button{
margin-top:15px;
}
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

/* PAGE */

.creategroup-page{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

background:linear-gradient(135deg,#8ec5df,#e0f7ff);

padding:40px;
}

/* TOPBAR */

.cg-topbar{
width:100%;
max-width:600px;
display:flex;
gap:15px;
margin-bottom:25px;
}

.cg-topbar button{
flex:1;
padding:12px;
border:none;
border-radius:12px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
font-weight:500;
cursor:pointer;
transition:0.3s;
}

.cg-topbar button:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

/* CARD */

.creategroup-card{
width:100%;
max-width:500px;

background:white;

border-radius:20px;

padding:40px;

box-shadow:0 20px 40px rgba(0,0,0,0.15);

}
/* HEADER */

.creategroup-header{
margin-bottom:25px;
text-align:center;
}

.creategroup-header h2{
color:#1e293b;
font-size:26px;
margin-bottom:8px;
}

.creategroup-header p{
color:#64748b;
font-size:14px;
}

/* FORM */

.form-container{
display:flex;
flex-direction:column;
gap:18px;
}

/* INPUT */

.group-input{
padding:12px 14px;
border-radius:10px;
border:1px solid #e2e8f0;
background:#f8fafc;
color:#1e293b;
font-size:14px;
outline:none;
transition:0.25s;
}

.group-input:focus{
border:1px solid #0ea5e9;
box-shadow:0 0 8px rgba(14,165,233,0.3);
}

/* TEXTAREA */

.group-textarea{
padding:12px 14px;
border-radius:10px;
border:1px solid #e2e8f0;
background:#f8fafc;
color:#1e293b;
font-size:14px;
outline:none;
resize:none;
height:110px;
transition:0.25s;
}

.group-textarea:focus{
border:1px solid #0ea5e9;
box-shadow:0 0 8px rgba(14,165,233,0.3);
}

/* BUTTON */
.create-btn{
padding:12px;
border:none;
border-radius:10px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
font-size:15px;
font-weight:500;
cursor:pointer;
transition:0.3s;
}

.create-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

/* MODAL */

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}

.modal-box{
background:white;
padding:25px;
border-radius:14px;
width:320px;
text-align:center;
position:relative;
}

.[Link]{
border-top:5px solid #22c55e;
}

.[Link]{
border-top:5px solid #ef4444;
}

.close{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
font-size:18px;
}

.modal-box button{
margin-top:15px;
padding:10px;
width:100%;
background:#0ea5e9;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}
/* RESPONSIVE */

@media(max-width:600px){

.creategroup-card{
padding:30px;
}

.creategroup-header h2{
font-size:22px;
}

}
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE */
.dashboard-container{
min-height:100vh;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
padding:25px;
}

/* HEADER CARD */
.header-card{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 25px;
background:rgba(255,255,255,0.9);
border-radius:18px;
box-shadow:0 15px 35px rgba(0,0,0,0.1);
backdrop-filter:blur(10px);
margin-bottom:20px;
}

.header-left h2{
font-size:22px;
color:#0f172a;
}

.header-right{
display:flex;
gap:12px;
}

/* BUTTONS */
.security-btn{
padding:10px 18px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
border:none;
border-radius:10px;
cursor:pointer;
transition:0.3s;
}

.security-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

.logout-btn{
display:flex;
align-items:center;
gap:6px;
padding:10px 18px;
background:#ef4444;
color:white;
border:none;
border-radius:10px;
cursor:pointer;
transition:0.3s;
}

.logout-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

/* WELCOME CARD */
.welcome-card{
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
padding:30px;
border-radius:18px;
margin-bottom:25px;
box-shadow:0 15px 35px rgba(0,0,0,0.2);
}

.welcome-card h1{
font-size:30px;
}

.welcome-card p{
margin-top:8px;
opacity:0.9;
}

/* GRID */
.dashboard-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

/* CARD */
.dashboard-card{
background:rgba(255,255,255,0.9);
border-radius:16px;
padding:25px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
cursor:pointer;
transition:0.3s;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
backdrop-filter:blur(10px);
}

.dashboard-card:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

/* ICON */
.card-icon{
font-size:32px;
color:#0ea5e9;
margin-bottom:10px;
}

/* TEXT */
.dashboard-card span{
font-size:14px;
font-weight:500;
color:#0f172a;
text-align:center;
}

/* RESPONSIVE */
@media(max-width:768px){

.header-card{
flex-direction:column;
gap:15px;
}

.header-right{
flex-direction:column;
width:100%;
}

.header-right button{
width:100%;
}

/* MODAL TEXT FORMAT */

.modal-text{
text-align:left;
margin-top:10px;
line-height:1.6;
font-size:14px;
color:#374151;
}

/* INFO TYPE */
.[Link]{
border-top:5px solid #0ea5e9;
}

/* MODAL LIST */
.modal-list{
margin-top:15px;
text-align:left;
}

/* EACH ITEM */
.modal-item{
padding:6px 0;
font-size:14px;
color:#334155;
display:flex;
align-items:center;
gap:8px;
}

/* ICON STYLE */
.modal-item::before{
content:"🔐";
}

/* TITLE */
.modal-box h3{
font-size:18px;
margin-bottom:10px;
}

/* BUTTON CENTER */
.modal-box button{
width:100%;
margin-top:15px;
padding:10px;
background:#0ea5e9;
border:none;
color:white;
border-radius:8px;
cursor:pointer;
}
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE */
.file-approvals-page{
min-height:100vh;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
display:flex;
flex-direction:column;
align-items:center;
padding:40px 20px;
}

/* TOP CARD */
.top-card{
width:100%;
max-width:900px;
background:white;
border-radius:16px;
padding:20px 30px;
margin-bottom:20px;

display:flex;
justify-content:space-between;
align-items:center;

box-shadow:0 10px 30px rgba(0,0,0,0.1);

}

.top-card h2{
color:#1e293b;
}

/* ACTION BUTTONS */
.top-actions{
display:flex;
gap:10px;
}

.top-actions button{
padding:10px 18px;
border:none;
border-radius:10px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
cursor:pointer;
}

/* MAIN CARD */
.approvals-card{
width:100%;
max-width:900px;
background:white;
border-radius:16px;
padding:25px;
box-shadow:0 15px 40px rgba(0,0,0,0.1);
}
/* LIST */
.approvals-list{
display:flex;
flex-direction:column;
gap:15px;
}

/* ITEM (MATCH ACTIVE GROUPS) */

.approval-item{
display:flex;
justify-content:space-between;
align-items:center;

background:#f8fafc;
padding:18px;
border-radius:12px;
border:1px solid #e2e8f0;
}

/* LEFT */
.group-left h3{
color:#1e293b;
}

.desc{
color:#64748b;
font-size:13px;
margin-top:5px;
}

/* BUTTON STYLE SAME AS GROUPS */

.btn{
padding:8px 16px;
border:none;
border-radius:8px;
color:white;
cursor:pointer;
font-size:13px;
}

/* APPROVE BUTTON (CLEAN, NO GRADIENT BG ISSUE) */

.[Link]{
background:#22c55e;
}

/* EMPTY */
.empty{
text-align:center;
color:#64748b;
padding:20px;
}

/* MODAL */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:flex;
justify-content:center;
align-items:center;
}

.modal-box{
background:white;
padding:25px;
border-radius:12px;
width:300px;
text-align:center;
position:relative;
}

.[Link]{
border-top:5px solid #22c55e;
}

.[Link]{
border-top:5px solid #ef4444;
}

.close{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
}

.modal-box button{
margin-top:10px;
padding:10px;
width:100%;
background:#0ea5e9;
color:white;
border:none;
border-radius:8px;
}
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE */
.files-page{
min-height:100vh;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
padding:30px;
}

/* TOPBAR */
.files-topbar{
display:flex;
gap:15px;
margin-bottom:25px;
}

.files-topbar button{
flex:1;
padding:12px;
border:none;
border-radius:12px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
font-weight:500;
cursor:pointer;
transition:0.3s;
}

.files-topbar button:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

/* CARD CONTAINER */
.files-card{
background:white;
border-radius:20px;
padding:30px;
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* HEADER */
.files-header h2{
font-size:26px;
color:#1e293b;
margin-bottom:5px;
}

.files-header p{
color:#64748b;
margin-bottom:25px;
}

/* GRID */
.files-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
gap:20px;
}

/* FILE CARD */
.file-card{
background:#f8fafc;
padding:20px;
border-radius:14px;
transition:0.3s;
border:1px solid #e2e8f0;
}

.file-card:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 15px 30px rgba(0,0,0,0.15);
}

/* FILE NAME */
.file-name{
font-weight:600;
color:#1e293b;
margin-bottom:10px;
}

/* META */
.file-meta{
font-size:13px;
color:#64748b;
margin-bottom:15px;
}

/* ACTIONS */
.file-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
}

.file-actions button{
flex:1;
padding:8px;
border:none;
border-radius:8px;
cursor:pointer;
font-size:13px;
transition:0.2s;
}

/* BUTTON COLORS */
.preview-btn{
background:#0ea5e9;
color:white;
}

.download-btn{
background:#22c55e;
color:white;
}

.delete-btn{
background:#ef4444;
color:white;
}

.file-actions button:hover{
opacity:0.9;
transform:scale(1.05);
}

/* MODAL */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}

.modal-box{
background:white;
padding:25px;
border-radius:14px;
width:320px;
text-align:center;
position:relative;
}

.[Link]{
border-top:5px solid #22c55e;
}

.[Link]{
border-top:5px solid #ef4444;
}

.[Link]{
border-top:5px solid #f59e0b;
}

.close{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
font-size:18px;
}

.modal-actions{
margin-top:15px;
display:flex;
gap:10px;
justify-content:center;
}

.modal-actions button{
padding:8px 12px;
border:none;
border-radius:6px;
cursor:pointer;
}

.modal-actions button:first-child{
background:#e2e8f0;
}

.modal-actions button:last-child{
background:#ef4444;
color:white;
}
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE */
.approvals-page{
min-height:100vh;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
padding:30px;
}

/* TOPBAR */
.approvals-topbar{
display:flex;
gap:15px;
margin-bottom:25px;
}

.approvals-topbar button{
flex:1;
padding:12px;
border:none;
border-radius:12px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
cursor:pointer;
font-weight:500;
}

/* CARD */
.approvals-card{
background:white;
padding:30px;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* HEADER */
.approvals-header h2{
color:#1e293b;
margin-bottom:5px;
}

.approvals-header p{
color:#64748b;
margin-bottom:20px;
}

/* LIST */
.approvals-list{
display:flex;
flex-direction:column;
gap:15px;
}

/* ITEM */
.approval-item{
display:flex;
justify-content:space-between;
align-items:center;
background:#f8fafc;
padding:20px;
border-radius:14px;
border:1px solid #e2e8f0;
}

/* LEFT */
.approval-left h3{
color:#1e293b;
}

.approval-left p{
color:#64748b;
margin-top:4px;
}

/* ACTIONS */
.approval-actions{
display:flex;
gap:10px;
}

/* APPROVE */
.approve-btn{
padding:8px 16px;
border:none;
border-radius:8px;
background:#22c55e;
color:white;
cursor:pointer;
}

/* REJECT */
.reject-btn{
padding:8px 16px;
border:none;
border-radius:8px;
background:#ef4444;
color:white;
cursor:pointer;
}

/* EMPTY */
.empty-state{
text-align:center;
padding:20px;
color:#64748b;
}

/* MODAL */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:flex;
justify-content:center;
align-items:center;
}

.modal-box{
background:white;
padding:25px;
border-radius:14px;
width:300px;
text-align:center;
position:relative;
}

.[Link]{
border-top:5px solid #22c55e;
}

.[Link]{
border-top:5px solid #ef4444;
}

.close{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
}

.modal-box button{
margin-top:10px;
padding:10px;
width:100%;
background:#0ea5e9;
color:white;
border:none;
border-radius:8px;
}
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE */
.groupfiles-page{
min-height:100vh;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
display:flex;
flex-direction:column;
align-items:center;
padding:40px 20px;
}

/* TOP CARD */
.top-card{
width:100%;
max-width:900px;
background:white;
border-radius:16px;
padding:20px 30px;
margin-bottom:20px;

display:flex;
justify-content:space-between;
align-items:center;

box-shadow:0 10px 30px rgba(0,0,0,0.1);

}

/* ACTIONS */
.top-actions{
display:flex;
gap:10px;
}

.top-actions button{
padding:10px 18px;
border:none;
border-radius:10px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
cursor:pointer;
}

/* CARD */
.files-card{
width:100%;
max-width:900px;
background:white;
border-radius:16px;
padding:25px;
box-shadow:0 15px 40px rgba(0,0,0,0.1);
}

/* LIST */
.files-list{
display:flex;
flex-direction:column;
gap:15px;
}

/* ITEM */
.file-item{
display:flex;
justify-content:space-between;
align-items:center;

background:#f8fafc;
padding:18px;

border-radius:12px;
border:1px solid #e2e8f0;
}

/* LEFT */
.file-left h3{
color:#1e293b;
}

.meta{
font-size:12px;
color:#64748b;
margin-top:4px;
}

/* RIGHT */
.file-right{
display:flex;
gap:8px;
flex-wrap:wrap;
}

/* BUTTON */
.btn{
padding:7px 14px;
border:none;
border-radius:8px;
color:white;
cursor:pointer;
font-size:12px;
}

/* TYPES */
.[Link]{background:#0ea5e9;}
.[Link]{background:#6366f1;}
.[Link]{background:#f59e0b;}
.[Link]{background:#ef4444;}
.[Link]{background:#22c55e;}
.[Link]{background:#64748b;}

/* EMPTY */
.empty{
text-align:center;
padding:20px;
color:#64748b;
}

/* MODAL */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:flex;
justify-content:center;
align-items:center;
}

/* BOX */
.modal-box{
background:white;
padding:25px;
border-radius:12px;
width:320px;
text-align:center;
position:relative;
}

/* CLOSE */
.close{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
}

/* TEXTAREA */
.modal-box textarea{
width:100%;
height:80px;
margin-top:10px;
padding:10px;
border-radius:8px;
border:1px solid #ccc;
}

/* MODAL ACTIONS */
.modal-actions{
margin-top:15px;
display:flex;
flex-direction:column;
gap:10px;
}

.modal-box button{
width:100%;
padding:10px;
border:none;
border-radius:8px;
background:#0ea5e9;
color:white;
}
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE */
.groups-page{
min-height:100vh;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);

display:flex;
flex-direction:column;
align-items:center;

padding:40px 20px;
}

/* TOP CARD */
.top-card{
width:100%;
max-width:900px;

background:white;
border-radius:16px;

padding:20px 30px;
margin-bottom:20px;

display:flex;
justify-content:space-between;
align-items:center;

box-shadow:0 10px 30px rgba(0,0,0,0.1);

}

.top-card h2{
color:#1e293b;
}

/* ACTION BUTTONS */
.top-actions{
display:flex;
gap:10px;
}

.top-actions button{
padding:10px 18px;
border:none;
border-radius:10px;

background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;

cursor:pointer;
}

/* MAIN CARD */
.groups-card{
width:100%;
max-width:900px;
background:white;
border-radius:16px;

padding:25px;

box-shadow:0 15px 40px rgba(0,0,0,0.1);

}

/* SUBTITLE */
.subtitle{
color:#64748b;
margin-bottom:20px;
}

/* LIST */
.groups-list{
display:flex;
flex-direction:column;
gap:15px;
}

/* ITEM */
.group-item{
display:flex;
justify-content:space-between;
align-items:center;

background:#f8fafc;
padding:18px;

border-radius:12px;
border:1px solid #e2e8f0;
}

/* LEFT */
.group-left{
display:flex;
align-items:center;
gap:10px;
}

.group-left h3{
color:#1e293b;
}

/* OWNER TAG */
.owner-tag{
background:#22c55e;
color:white;
font-size:11px;
padding:4px 8px;
border-radius:6px;
}

/* RIGHT */
.group-right{
display:flex;
gap:10px;
}

/* BUTTON BASE */
.btn{
padding:8px 16px;
border:none;
border-radius:8px;
color:white;
cursor:pointer;
font-size:13px;
}

/* BUTTON TYPES */
.[Link]{
background:#0ea5e9;
}

.[Link]{
background:#6366f1;
}

/* EMPTY */
.empty{
text-align:center;
color:#64748b;
padding:20px;
}
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE */
.invites-page{
min-height:100vh;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
padding:30px;
}

/* TOPBAR */
.invites-topbar{
display:flex;
gap:15px;
margin-bottom:25px;
}

.invites-topbar button{
flex:1;
padding:12px;
border:none;
border-radius:12px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
cursor:pointer;
font-weight:500;
transition:0.3s;
}

.invites-topbar button:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

/* CARD */
.invites-card{
background:white;
padding:30px;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* HEADER */
.invites-header h2{
color:#1e293b;
margin-bottom:5px;
}

.invites-header p{
color:#64748b;
margin-bottom:20px;
}

/* LIST */
.invites-list{
display:flex;
flex-direction:column;
gap:15px;
}

/* ITEM */
.invite-item{
display:flex;
justify-content:space-between;
align-items:center;

background:#f8fafc;
padding:20px;

border-radius:14px;
border:1px solid #e2e8f0;

transition:0.3s;
gap:20px;
}

.invite-item:hover{
transform:translateY(-3px);
box-shadow:0 10px 20px rgba(0,0,0,0.1);
}

/* LEFT */
.invite-left{
flex:1;
display:flex;
flex-direction:column;
gap:6px;
}

/* TITLE */
.group-title{
font-size:16px;
font-weight:600;
color:#1e293b;
}

/* DESCRIPTION */
.group-desc{
font-size:13px;
color:#64748b;
line-height:1.4;
max-width:500px;
}

/* RIGHT */
.invite-right{
display:flex;
align-items:center;
}

/* BUTTON */
.accept-btn{
padding:10px 20px;
border:none;
border-radius:10px;

background:linear-gradient(135deg,#22c55e,#16a34a);

color:white;
font-weight:500;

cursor:pointer;

transition:0.3s;
white-space:nowrap;
}

.accept-btn:hover{
transform:scale(1.05);
box-shadow:0 8px 18px rgba(34,197,94,0.4);
}

/* EMPTY */
.empty-state{
text-align:center;
padding:30px;
color:#64748b;
}

/* MODAL */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}

.modal-box{
background:white;
padding:25px;
border-radius:14px;
width:320px;
text-align:center;
position:relative;
}

.[Link]{
border-top:5px solid #22c55e;
}

.[Link]{
border-top:5px solid #ef4444;
}

.close{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
font-size:18px;
}

.modal-box button{
margin-top:15px;
padding:10px;
width:100%;
background:#0ea5e9;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE */
.invite-page{
min-height:100vh;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
display:flex;
flex-direction:column;
align-items:center;
padding:30px;
}

/* TOP BAR */
.invite-top{
width:100%;
max-width:600px;
margin-bottom:20px;
}

.invite-top button{
padding:10px 18px;
border:none;
border-radius:10px;
background:#0ea5e9;
color:white;
cursor:pointer;
font-weight:500;
}

/* CARD */
.invite-card{
width:100%;
max-width:500px;
background:white;
padding:40px;
border-radius:20px;
box-shadow:0 20px 40px rgba(0,0,0,0.15);
text-align:center;
}

/* HEADER */
.invite-card h2{
color:#1e293b;
margin-bottom:10px;
}

.subtitle{
color:#64748b;
font-size:14px;
margin-bottom:25px;
}

/* GROUP ID */
.group-id{
background:#f1f5f9;
padding:10px;
border-radius:10px;
margin-bottom:25px;
font-size:14px;
color:#334155;
}

.group-id span{
font-weight:600;
}

/* FORM */
.invite-form{
display:flex;
flex-direction:column;
gap:18px;
}

/* INPUT WRAPPER */
.email-input-wrapper{
display:flex;
align-items:center;
background:#f8fafc;
border-radius:12px;
padding:10px;
border:1px solid #e2e8f0;
}

/* ICON */
.email-icon{
margin-right:10px;
font-size:18px;
}

/* INPUT */
.email-input{
border:none;
outline:none;
width:100%;
background:transparent;
font-size:14px;
color:#1e293b;
}

/* BUTTON */
.invite-btn{
padding:14px;
border:none;
border-radius:12px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
font-size:15px;
cursor:pointer;
transition:0.3s;
}

.invite-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(14,165,233,0.4);
}

.invite-btn:disabled{
opacity:0.6;
cursor:not-allowed;
}

/* MODAL */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:flex;
justify-content:center;
align-items:center;
z-index:1000;
}

.modal-box{
background:white;
padding:25px;
border-radius:16px;
width:300px;
text-align:center;
position:relative;
animation:fadeIn 0.3s ease;
}

/* TYPES */
.[Link]{
border-top:5px solid #22c55e;
}

.[Link]{
border-top:5px solid #ef4444;
}

/* CLOSE */
.close{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
font-size:18px;
}

/* MODAL TEXT */
.modal-box h3{
margin-bottom:10px;
color:#1e293b;
}

.modal-box p{
color:#64748b;
font-size:14px;
}

/* BUTTON */
.modal-box button{
margin-top:15px;
padding:10px;
width:100%;
background:#0ea5e9;
color:white;
border:none;
border-radius:10px;
cursor:pointer;
}

/* ANIMATION */
@keyframes fadeIn{
from{
opacity:0;
transform:scale(0.9);
}
to{
opacity:1;
transform:scale(1);
}
}

/* RESPONSIVE */
@media(max-width:600px){

.invite-card{
padding:25px;
}

}
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE BACKGROUND */
.page{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
}

/* MAIN CARD */
.auth{
width:85%;
height:85vh;
display:flex;
border-radius:20px;
overflow:hidden;
box-shadow:0 30px 60px rgba(0,0,0,0.2);
background:white;
}

/* LEFT */
.left{
width:40%;
background:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
}

.left img{
width:160px;
margin-bottom:20px;
}

.left h1{
font-size:28px;
color:#0f172a;
}

.left p{
color:#64748b;
}

/* RIGHT */
.right{
width:60%;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
}
/* FORM CARD */
.form{
width:360px;
background:white;
padding:30px;
border-radius:15px;
box-shadow:0 15px 30px rgba(0,0,0,0.2);
}

.form h2{
text-align:center;
margin-bottom:20px;
}

/* INPUT */
input{
width:100%;
padding:12px;
margin-top:10px;
border:1px solid #ccc;
border-radius:8px;
outline:none;
}

input:focus{
border-color:#0ea5e9;
}

/* ERROR */
.err{
border:1px solid red;
}

/* PASSWORD */
.pass{
position:relative;
}

.pass span{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
}

/* BUTTON */
button{
width:100%;
padding:12px;
margin-top:15px;
background:#0ea5e9;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}

button:hover{
background:#0284c7;
}

/* LINK BUTTON */
.link-btn{
background:none;
color:#0ea5e9;
}
/* OTP */
.otp{
display:flex;
justify-content:space-between;
margin-top:10px;
}

.otp input{
width:45px;
height:45px;
text-align:center;
font-size:18px;
}

/* MODAL */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
backdrop-filter:blur(5px);
}

.modal-box{
background:white;
padding:25px;
border-radius:12px;
width:300px;
text-align:center;
position:relative;
animation:pop 0.3s ease;
}

.modal-box span{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
}

/* MODAL TYPES */
.[Link]{
border-top:5px solid #22c55e;
}

.[Link]{
border-top:5px solid #ef4444;
}

/* MODAL BUTTON */
.modal-box button{
margin-top:15px;
padding:10px;
background:#0ea5e9;
border:none;
color:white;
border-radius:8px;
cursor:pointer;
}
@keyframes pop{
from{transform:scale(0.8);opacity:0;}
to{transform:scale(1);opacity:1;}
}

/* ERROR TEXT */
.error-text{
color:red;
font-size:12px;
margin-top:5px;
display:block;
}

/* PASSWORD RULES */
.rules{
margin-top:10px;
font-size:12px;
color:#64748b;
}

@keyframes fadeIn{
from{opacity:0; transform:translateY(-5px);}
to{opacity:1; transform:translateY(0);}
}

.rules p{
margin:2px 0;
}

.rules .ok{
color:green;
font-weight:500;
}

.success-text{
color:green;
font-size:13px;
margin-top:6px;
font-weight:500;
}

/* LINK TEXT */
.link-text{
margin-top:10px;
text-align:center;
}

.link-text a{
color:#2563eb;
font-size:14px;
text-decoration:none;
}

.link-text a:hover{
text-decoration:underline;
}
[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE BACKGROUND */
.page{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
}

/* MAIN CARD */
.auth{
width:85%;
height:85vh;
display:flex;
border-radius:20px;
overflow:hidden;
box-shadow:0 30px 60px rgba(0,0,0,0.2);
background:white;
}

/* LEFT */
.left{
width:40%;
background:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
}

.left img{
width:160px;
margin-bottom:20px;
}

.left h1{
font-size:28px;
color:#0f172a;
}

.left p{
color:#64748b;
}

/* RIGHT */
.right{
width:60%;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
}
/* FORM CARD */
.form{
width:360px;
background:white;
padding:30px;
border-radius:15px;
box-shadow:0 15px 30px rgba(0,0,0,0.2);
}

.form h2{
text-align:center;
margin-bottom:20px;
}

/* INPUT */
input{
width:100%;
padding:12px;
margin-top:10px;
border:1px solid #ccc;
border-radius:8px;
outline:none;
}

input:focus{
border-color:#0ea5e9;
}

/* ERROR */
.err{
border:1px solid red;
}

/* PASSWORD */
.pass{
position:relative;
}

.pass span{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
}

/* BUTTON */
button{
width:100%;
padding:12px;
margin-top:15px;
background:#0ea5e9;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}

button:hover{
background:#0284c7;
}

/* LINK BUTTON */
.link-btn{
background:none;
color:#0ea5e9;
}
/* OTP */
.otp{
display:flex;
justify-content:space-between;
margin-top:10px;
}

.otp input{
width:45px;
height:45px;
text-align:center;
font-size:18px;
}

/* MODAL */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
backdrop-filter:blur(5px);
}

.modal-box{
background:white;
padding:25px;
border-radius:12px;
width:300px;
text-align:center;
position:relative;
animation:pop 0.3s ease;
}

.modal-box span{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
}

/* MODAL TYPES */
.[Link]{
border-top:5px solid #22c55e;
}

.[Link]{
border-top:5px solid #ef4444;
}

/* MODAL BUTTON */
.modal-box button{
margin-top:15px;
padding:10px;
background:#0ea5e9;
border:none;
color:white;
border-radius:8px;
cursor:pointer;
}
@keyframes pop{
from{transform:scale(0.8);opacity:0;}
to{transform:scale(1);opacity:1;}
}

/* ERROR TEXT */
.error-text{
color:red;
font-size:12px;
margin-top:5px;
display:block;
}

/* PASSWORD RULES */
.rules{
margin-top:10px;
font-size:12px;
color:#64748b;
}

@keyframes fadeIn{
from{opacity:0; transform:translateY(-5px);}
to{opacity:1; transform:translateY(0);}
}

.rules p{
margin:2px 0;
}
.rules .ok{
color:green;
font-weight:500;
}

.success-text{
color:green;
font-size:13px;
margin-top:6px;
font-weight:500;
}

[Link]
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Poppins",sans-serif;
}

/* PAGE */
.upload-page{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#8ec5df,#e0f7ff);
}

/* CARD */
.upload-card{
width:420px;
background:white;
padding:30px;
border-radius:18px;
box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

/* TITLE */
.upload-card h2{
text-align:center;
margin-bottom:10px;
}

.subtitle{
text-align:center;
font-size:14px;
color:#64748b;
margin-bottom:20px;
}

/* INPUT */
.input-group{
margin-top:15px;
}

.input-group label{
font-size:13px;
color:#334155;
}

select{
width:100%;
padding:10px;
margin-top:5px;
border-radius:8px;
border:1px solid #ccc;
}

/* UPLOAD BOX */
.upload-box{
margin-top:20px;
border:2px dashed #0ea5e9;
border-radius:12px;
padding:30px;
text-align:center;
cursor:pointer;
position:relative;
transition:0.3s;
}

.upload-box:hover{
background:#f0f9ff;
}

.upload-box input{
position:absolute;
width:100%;
height:100%;
opacity:0;
cursor:pointer;
}

.filename{
margin-top:10px;
font-size:13px;
color:#0ea5e9;
}

/* BUTTON */
.upload-btn{
width:100%;
margin-top:20px;
padding:12px;
background:linear-gradient(135deg,#0ea5e9,#2563eb);
color:white;
border:none;
border-radius:10px;
cursor:pointer;
transition:0.3s;
}

.upload-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

/* MODAL */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}

.modal-box{
background:white;
padding:25px;
border-radius:12px;
width:320px;
text-align:center;
position:relative;
}

.[Link]{
border-top:5px solid #22c55e;
}

.[Link]{
border-top:5px solid #ef4444;
}

.close{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
}

.modal-box button{
margin-top:15px;
padding:10px;
background:#0ea5e9;
color:white;
border:none;
border-radius:8px;
cursor:pointer;
}

.upload-topbar{
position:absolute;
top:20px;
left:20px;
display:flex;
gap:10px;
}

.upload-topbar button{
padding:8px 14px;
border:none;
border-radius:8px;
cursor:pointer;
background:#6366f1;
color:white;
}

.upload-box{
display:block;
margin-top:10px;
border:2px dashed rgba(255,255,255,0.3);
border-radius:12px;
padding:40px 20px;
cursor:pointer;
position:relative;
transition:0.3s;
text-align:center;
}

.upload-box input{
position:absolute;
width:100%;
height:100%;
opacity:0;
cursor:pointer;
top:0;
left:0;
}