!DOCTYPE html
html lang=en
head
meta charset=UTF-8
meta name=viewport content=width=device-width, initial-scale=1.0
titleNEIR - National Equipment Identity Registertitle
!-- 1. Tailwind CSS --
script src=httpscdn.tailwindcss.comscript
!-- 2. Import Map --
script type=importmap
{
imports {
react httpsesm.shreact@18.2.0,
react-domclient httpsesm.shreact-dom@18.2.0client,
lucide-react httpsesm.shlucide-react@0.292.0,
firebaseapp httpswww.gstatic.comfirebasejs10.7.1firebase-app.js,
firebaseauth httpswww.gstatic.comfirebasejs10.7.1firebase-auth.js,
firebasefirestore httpswww.gstatic.comfirebasejs10.7.1firebase-firestore.js
}
}
script
!-- 3. Babel --
script src=httpsunpkg.com@babelstandalonebabel.min.jsscript
style
-webkit-scrollbar { width 6px; }
-webkit-scrollbar-track { background #f1f1f1; }
-webkit-scrollbar-thumb { background #888; border-radius 3px; }
-webkit-scrollbar-thumbhover { background #555; }
body { font-family 'Inter', sans-serif; background-color #E0F7FA; }
style
head
body
div id=rootdiv
!-- 4. Main Application Code --
script type=textbabel data-type=module
import React, { useState, useEffect, useRef } from 'react';
import { createRoot } from 'react-domclient';
import {
Shield, ShieldCheck, ShieldAlert, Smartphone, Database,
Plus, Search, Loader2, Trash2, Lock, User,
LogOut, FileText, UploadCloud, X, Menu, Phone, CheckCircle,
Eye, EyeOff, MessageSquare, Send, HelpCircle, ChevronDown, ChevronUp, AlertTriangle, Calendar, UserCircle, CreditCard, Users, BarChart3, AlertOctagon
} from 'lucide-react';
import { initializeApp } from 'firebaseapp';
import {
getAuth,
signInAnonymously,
onAuthStateChanged,
signInWithCustomToken,
signOut
} from 'firebaseauth';
import {
getFirestore,
doc,
setDoc,
getDoc,
collection,
getDocs,
deleteDoc,
serverTimestamp,
writeBatch
} from 'firebasefirestore';
==========================================
🔥 YOUR FIREBASE CONFIGURATION 🔥
==========================================
const firebaseConfig = {
apiKey AIzaSyD95DL5yCQjSTd10Z77hd0mlEdZnqhYsKU,
authDomain neir-databse.firebaseapp.com,
projectId neir-databse,
storageBucket neir-databse.firebasestorage.app,
messagingSenderId 748086251652,
appId 1748086251652web9c0279ee80355699cff2d1,
measurementId G-K43HCDWMR6
};
==========================================
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = 'neir-web-app';
const IMEI_COLLECTION = 'imei_records';
const USERS_COLLECTION = 'users_db';
--- CLOUDFLARE WIDGET ---
const CloudflareWidget = () = (
div className=border rounded-md p-3 flex items-center justify-between bg-gray-50 mb-4 cursor-pointer hoverbg-gray-100 transition-colors
div className=flex items-center gap-3
div className=relativediv className=w-5 h-5 rounded-full border-2 border-slate-300divdiv className=absolute top-0 left-0 w-5 h-5 rounded-full border-2 border-orange-500 border-t-transparent animate-spindivdiv
span className=text-slate-600 text-smVerifying...span
div
div className=flex flex-col items-end
div className=flex items-center gap-1UploadCloud size={12} className=text-orange-500span className=text-[10px] font-bold text-slate-600CLOUDFLAREspandiv
div className=text-[8px] text-slate-400 flex gap-1spanPrivacyspan • spanTermsspandiv
div
div
);
--- AUTH MODAL ---
function AuthModal({ type, close, openSignup, openLogin, onSuccess, onLoginSubmit, onSignupSubmit }) {
const [formData, setFormData] = useState({ firstName '', lastName '', username '', mobile '', password '', verificationType '', lastFourDigits '' });
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [showPass, setShowPass] = useState(false);
const handleSubmit = async (e) = {
e.preventDefault();
setError(''); setLoading(true);
try {
let result;
if (type === 'signup') result = await onSignupSubmit(formData);
else result = await onLoginSubmit(formData.username, formData.password);
if (result.success) { if (type === 'signup') alert(Registered Successfully!); onSuccess(result.role); }
else setError(result.error);
} catch (err) { setError('Error occurred.'); } finally { setLoading(false); }
};
return (
div className=fixed inset-0 bg-black60 backdrop-blur-sm z-50 flex items-center justify-center p-4
div className=bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden animate-in zoom-in-95 duration-200 relative max-h-[90vh] overflow-y-auto
button onClick={close} className=absolute right-4 top-4 text-slate-400 hovertext-slate-600 z-10X size={24}button
div className=px-6 pt-6 pb-2h3 className=text-2xl font-bold text-slate-800 mb-1{type === 'login' 'Login' 'Register'}h3div
form onSubmit={handleSubmit} className=px-6 pb-6 space-y-4
{type === 'signup' (
div className=space-y-4
div className=grid grid-cols-2 gap-4
div className=space-y-1label className=text-sm text-slate-600Enter your first name span className=text-red-500spanlabeldiv className=relativeUser className=absolute left-3 top-2.5 text-slate-400 w-4 h-4input required type=text className=w-full pl-9 p-2.5 border rounded-md focusring-1 focusring-[#00BCD4] outline-none bg-white value={formData.firstName} onChange={e = setFormData({...formData, firstName e.target.value})} placeholder=First namedivdiv
div className=space-y-1label className=text-sm text-slate-600Enter your last name span className=text-red-500spanlabeldiv className=relativeUser className=absolute left-3 top-2.5 text-slate-400 w-4 h-4input required type=text className=w-full pl-9 p-2.5 border rounded-md focusring-1 focusring-[#00BCD4] outline-none bg-white value={formData.lastName} onChange={e = setFormData({...formData, lastName e.target.value})} placeholder=Last namedivdiv
div
div className=space-y-1label className=text-sm text-slate-600Enter your username span className=text-red-500spanlabeldiv className=relativeUser className=absolute left-3 top-2.5 text-slate-400 w-4 h-4input required type=text className=w-full pl-9 p-2.5 border rounded-md focusring-1 focusring-[#00BCD4] outline-none bg-white value={formData.username} onChange={e = setFormData({...formData, username e.target.value})} placeholder=Usernamedivdiv
div className=space-y-1label className=text-sm text-slate-600Enter your mobile number span className=text-red-500spanlabeldiv className=relativePhone className=absolute left-3 top-2.5 text-slate-400 w-4 h-4input required type=tel className=w-full pl-9 p-2.5 border rounded-md focusring-1 focusring-[#00BCD4] outline-none bg-white value={formData.mobile} onChange={e = setFormData({...formData, mobile e.target.value})} placeholder=Mobile Number (01XXXXXXXXX)divdiv
div className=space-y-1label className=text-sm text-slate-600Choose Verification Type span className=text-red-500spanlabeldiv className=relativeCreditCard className=absolute left-3 top-2.5 text-slate-400 w-4 h-4select required className=w-full pl-9 p-2.5 border rounded-md focusring-1 focusring-[#00BCD4] outline-none bg-white appearance-none text-slate-600 value={formData.verificationType} onChange={e = setFormData({...formData, verificationType e.target.value})}option value=Select a verification typeoptionoption value=nidNational ID (NID)optionoption value=birth_certBirth Certificateoptionoption value=passportPassportoptionselectChevronDown className=absolute right-3 top-3 text-slate-400 w-4 h-4 pointer-events-nonedivdiv
div className=space-y-1label className=text-sm text-slate-600Enter your last four digits span className=text-red-500spanlabeldiv className=relativediv className=absolute left-3 top-2.5 text-slate-400 font-bold text-xs border border-slate-300 rounded px-11234divinput required type=text maxLength={4} className=w-full pl-12 p-2.5 border rounded-md focusring-1 focusring-[#00BCD4] outline-none bg-white value={formData.lastFourDigits} onChange={e = setFormData({...formData, lastFourDigits e.target.value})} placeholder=Last four digitsdivdiv
div className=space-y-1label className=text-sm text-slate-600Password span className=text-red-500spanlabeldiv className=relativeLock className=absolute left-3 top-2.5 text-slate-400 w-4 h-4input required type={showPass text password} className=w-full pl-9 pr-9 p-2.5 border rounded-md focusring-1 focusring-[#00BCD4] outline-none bg-white value={formData.password} onChange={e = setFormData({...formData, password e.target.value})} placeholder=Passwordbutton type=button onClick={() = setShowPass(!showPass)} className=absolute right-3 top-3 text-slate-400{showPass EyeOff size={16} Eye size={16}}buttondivdiv
div
) (
div className=space-y-4
div className=space-y-1label className=text-sm text-slate-600Enter your usernamelabeldiv className=relativeUser className=absolute left-3 top-3 text-slate-400 w-4 h-4input required type=text className=w-full pl-9 p-3 border rounded-md focusring-1 focusring-[#00BCD4] outline-none bg-white value={formData.username} onChange={e = setFormData({...formData, username e.target.value})} placeholder=Usernamedivdiv
div className=space-y-1label className=text-sm text-slate-600Enter your passwordlabeldiv className=relativeLock className=absolute left-3 top-3 text-slate-400 w-4 h-4input required type={showPass text password} className=w-full pl-9 pr-9 p-3 border rounded-md focusring-1 focusring-[#00BCD4] outline-none bg-white value={formData.password} onChange={e = setFormData({...formData, password e.target.value})} placeholder=Enter your passwordbutton type=button onClick={() = setShowPass(!showPass)} className=absolute right-3 top-3.5 text-slate-400{showPass EyeOff size={16} Eye size={16}}buttondivdiv
CloudflareWidget
div
)}
{error && p className=text-red-500 text-sm{error}p}
button type=submit disabled={loading} className=w-full bg-[#00BCD4] hoverbg-[#00ACC1] text-white font-bold py-3 rounded-full shadow-lg transition-all flex justify-center items-center gap-2 mt-4 uppercase{loading Loader2 className=animate-spin (type === 'login' LOGIN span className=text-lg→span 'Register')}button
div className=flex justify-between items-center text-xs mt-4 px-1{type === 'login' (span className=text-slate-500Did you forget your password button type=button className=text-[#00BCD4] hoverunderlineReset Passwordbuttonspanspan className=text-slate-500Don't have an account button type=button onClick={openSignup} className=text-[#00BCD4] hoverunderline font-boldSign Upbuttonspan) (div className=w-full text-centerspan className=text-slate-500Already have an account button type=button onClick={openLogin} className=text-[#00BCD4] hoverunderline font-boldLoginbuttonspandiv)}div
form
div
div
)
}
--- ADMIN PANEL ---
function AdminPanel({ stats, adminInput, setAdminInput, handleSingleAdd, loading, adminMsg, handleCSVUpload, csvFile, setCsvFile, fileInputRef, isUploading, uploadProgress, imeiList, handleDelete, fetchDashboardData }) {
return (
div className=animate-in fade-in slide-in-from-bottom-4 duration-500 mt-8 px-4
div className=grid grid-cols-2 gap-4 mb-6
div className=bg-white p-6 rounded-2xl shadow-lg border-b-4 border-[#00897B] flex items-center gap-4
div className=p-3 bg-teal-50 rounded-full text-[#00897B]Database size={24}div
divp className=text-sm text-slate-500 font-bold uppercase tracking-widerTotal IMEIsph3 className=text-3xl font-extrabold text-slate-800{stats.imei}h3div
div
div className=bg-white p-6 rounded-2xl shadow-lg border-b-4 border-indigo-500 flex items-center gap-4
div className=p-3 bg-indigo-50 rounded-full text-indigo-500Users size={24}div
divp className=text-sm text-slate-500 font-bold uppercase tracking-widerTotal Usersph3 className=text-3xl font-extrabold text-slate-800{stats.users}h3div
div
div
div className=bg-white p-6 rounded-2xl shadow-lg mb-6 border-l-4 border-[#00897B]
h2 className=text-2xl font-bold text-slate-800 mb-6 flex items-center gap-2Database className=text-[#00897B] Admin Dashboardh2
div className=grid mdgrid-cols-2 gap-6
div className=bg-slate-50 p-5 rounded-xl border border-slate-200h3 className=font-bold text-slate-700 mb-3Single Entryh3form onSubmit={handleSingleAdd} className=flex gap-2input type=text placeholder=IMEI Number className=flex-1 p-3 rounded-lg border outline-none font-mono value={adminInput} onChange={e = setAdminInput(e.target.value)} button disabled={loading} className=bg-[#00897B] text-white px-4 rounded-lg hoverbg-teal-700{loading Loader2 className=animate-spin Plus}buttonformdiv
div className=bg-slate-50 p-5 rounded-xl border border-slate-200h3 className=font-bold text-slate-700 mb-3Bulk CSV Uploadh3{!isUploading (div className=flex gap-2 items-centerinput type=file accept=.csv ref={fileInputRef} onChange={e = setCsvFile(e.target.files[0])} className=w-full text-sm text-slate-500 filemr-4 filepy-2 filepx-4 filerounded-full fileborder-0 filetext-xs filefont-semibold filebg-[#E0F2F1] filetext-[#00897B]{csvFile && button onClick={handleCSVUpload} className=bg-[#00897B] text-white px-3 py-2 rounded-lg text-smUploadCloud size={16}button}div) (divdiv className=flex justify-between text-xs font-bold text-[#00897B] mb-1spanUploading...spanspan{uploadProgress}%spandivdiv className=w-full bg-slate-200 rounded-full h-2div className=bg-[#00897B] h-2 rounded-full style={{width `${uploadProgress}%`}}divdivdiv)}div
div
{adminMsg && div className={`mt-4 p-3 rounded-lg text-center font-bold ${adminMsg.includes('Success') adminMsg.includes('Uploaded') 'bg-green-100 text-green-700' 'bg-red-100 text-red-700'}`}{adminMsg}div}
div
div className=bg-white rounded-2xl shadow-lg overflow-hidden
div className=p-4 border-b flex justify-between items-center bg-slate-50h3 className=font-bold text-slate-700Records ({imeiList.length})h3button onClick={fetchDashboardData} className=text-xs text-[#00897B] font-bold hoverunderlineREFRESHbuttondiv
div className=max-h-[400px] overflow-y-auto p-0
table className=w-full text-sm text-leftthead className=text-xs text-slate-500 uppercase bg-slate-100 sticky top-0trth className=px-6 py-3IMEIthth className=px-6 py-3Typethth className=px-6 py-3 text-rightActionthtrtheadtbody className=divide-y divide-slate-100{imeiList.map((item) = (tr key={item.id} className=hoverbg-slate-50td className=px-6 py-3 font-mono text-slate-600{item.imei}tdtd className=px-6 py-3 text-xsspan className={`px-2 py-1 rounded-full ${item.method === 'bulk_csv' 'bg-orange-100 text-orange-700' 'bg-blue-100 text-blue-700'}`}{item.method === 'bulk_csv' 'CSV' 'Manual'}spantdtd className=px-6 py-3 text-rightbutton onClick={() = handleDelete(item.id)} className=text-slate-300 hovertext-red-500Trash2 size={16}buttontdtr))}tbodytable
div
div
div
)
}
--- MAIN APP ---
function App() {
const [appUser, setAppUser] = useState(null);
const [activeTab, setActiveTab] = useState('home');
const [showLoginModal, setShowLoginModal] = useState(false);
const [showSignupModal, setShowSignupModal] = useState(false);
const [showProfileModal, setShowProfileModal] = useState(false);
const [loading, setLoading] = useState(false);
const [checkInput, setCheckInput] = useState('');
const [checkResult, setCheckResult] = useState(null);
const [adminInput, setAdminInput] = useState('');
const [imeiList, setImeiList] = useState([]);
const [stats, setStats] = useState({ imei 0, users 0 });
const [adminMsg, setAdminMsg] = useState('');
const [csvFile, setCsvFile] = useState(null);
const [uploadProgress, setUploadProgress] = useState(0);
const [isUploading, setIsUploading] = useState(false);
const fileInputRef = useRef(null);
useEffect(() = {
const initConnection = async () = {
try { await signInAnonymously(auth); } catch (e) { console.error(Connection error, e); }
};
initConnection();
const savedUser = localStorage.getItem('neir_app_user');
if (savedUser) setAppUser(JSON.parse(savedUser));
}, []);
const handleAppLogin = async (username, password) = {
try {
const cleanUsername = username.toLowerCase().trim();
const userDocRef = doc(db, 'artifacts', appId, 'public', 'data', USERS_COLLECTION, cleanUsername);
const userDoc = await getDoc(userDocRef);
if (userDoc.exists()) {
const userData = userDoc.data();
if (userData.password === password) {
const safeRole = (cleanUsername === 'admin' cleanUsername === 'shoriful') 'admin' 'user';
const userObj = { username userData.username, firstName userData.firstName, lastName userData.lastName, mobile userData.mobile, role safeRole };
setAppUser(userObj);
localStorage.setItem('neir_app_user', JSON.stringify(userObj));
return { success true, role safeRole };
} else return { success false, error 'Incorrect password.' };
} else return { success false, error 'User not found.' };
} catch (error) { return { success false, error 'System error.' }; }
};
const handleAppSignup = async (formData) = {
try {
const username = formData.username.toLowerCase().trim();
const userDocRef = doc(db, 'artifacts', appId, 'public', 'data', USERS_COLLECTION, username);
const userDoc = await getDoc(userDocRef);
if (userDoc.exists()) return { success false, error 'Username taken.' };
const role = (username === 'admin' username === 'shoriful') 'admin' 'user';
const newUser = { ...formData, username, role, createdAt serverTimestamp() };
await setDoc(userDocRef, newUser);
const userObj = { username, firstName formData.firstName, lastName formData.lastName, mobile formData.mobile, role };
setAppUser(userObj);
localStorage.setItem('neir_app_user', JSON.stringify(userObj));
return { success true, role };
} catch (error) { return { success false, error 'Registration failed.' }; }
};
const handleLogout = () = {
setAppUser(null);
localStorage.removeItem('neir_app_user');
setActiveTab('home');
setShowProfileModal(false);
};
const fetchDashboardData = async () = {
try {
const imeiRef = collection(db, 'artifacts', appId, 'public', 'data', IMEI_COLLECTION);
const imeiSnap = await getDocs(imeiRef);
setImeiList(imeiSnap.docs.map(doc = ({ id doc.id, ...doc.data() })));
const usersRef = collection(db, 'artifacts', appId, 'public', 'data', USERS_COLLECTION);
const usersSnap = await getDocs(usersRef);
setStats({ imei imeiSnap.size, users usersSnap.size });
} catch (error) { console.error(Dashboard fetch error, error); }
};
const handleCheckIMEI = async (e) = {
e.preventDefault(); if (!checkInput) return; setLoading(true); setCheckResult(null);
try {
const docRef = doc(db, 'artifacts', appId, 'public', 'data', IMEI_COLLECTION, checkInput);
const docSnap = await getDoc(docRef);
setCheckResult(docSnap.exists() 'registered' 'not_registered');
} catch (error) { console.error(error); } finally { setLoading(false); }
};
const handleSingleAdd = async (e) = {
e.preventDefault(); if (!adminInput !^d+$.test(adminInput)) { setAdminMsg('Invalid Input'); return; } setLoading(true);
try {
await setDoc(doc(db, 'artifacts', appId, 'public', 'data', IMEI_COLLECTION, adminInput), { imei adminInput, addedBy appUser.username, createdAt serverTimestamp(), method 'single' });
setAdminMsg('Success!'); setAdminInput(''); fetchDashboardData();
} catch (error) { setAdminMsg('Error!'); } finally { setLoading(false); setTimeout(() = setAdminMsg(''), 3000); }
};
const handleCSVUpload = async () = {
if (!csvFile) return; setIsUploading(true);
const reader = new FileReader();
reader.onload = async (e) = {
const lines = e.target.result.split('n').map(l = l.trim()).filter(l = ^d+$.test(l));
if (!lines.length) { setIsUploading(false); return; }
try {
for (let i = 0; i lines.length; i += 400) {
const batch = writeBatch(db);
lines.slice(i, i + 400).forEach(imei = { batch.set(doc(db, 'artifacts', appId, 'public', 'data', IMEI_COLLECTION, imei), { imei, addedBy appUser.username 'bulk', createdAt serverTimestamp(), method 'bulk_csv' }); });
await batch.commit(); setUploadProgress(Math.round(((i + 400) lines.length) 100));
}
setAdminMsg(`Uploaded ${lines.length} records!`); setCsvFile(null); fetchDashboardData();
} catch (error) { setAdminMsg('Upload Failed'); } finally { setIsUploading(false); }
};
reader.readAsText(csvFile);
};
const handleDelete = async (id) = { if(confirm(Delete)) { await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', IMEI_COLLECTION, id)); fetchDashboardData(); } }
return (
div className=min-h-screen font-sans text-slate-800 relative
div className=fixed top-12 right-0 transform -translate-y-12 bg-[#00ACC1] text-white px-1 py-4 rounded-l-md z-50 cursor-pointer shadow-lg flex flex-col items-center gap-2 writing-mode-verticalAlertTriangle size={16} span className=text-xs font-bold whitespace-nowrap style={{ writingMode 'vertical-rl' }}Facing an issuespandiv
nav className=bg-white shadow-sm sticky top-0 z-30
div className=max-w-6xl mx-auto px-4 py-3 flex justify-between items-center
div className=flex items-center gap-2 cursor-pointer onClick={() = setActiveTab('home')}
div className=bg-slate-100 p-1 roundeddiv className=w-8 h-8 rounded-full bg-green-600 border-4 border-red-600divdiv
div className=hidden smblockp className=font-bold text-slate-800 text-lg leading-tightNEIRpp className=text-[10px] text-[#00897B] font-bold tracking-wider uppercaseSystem Redeveloped by Shoriful Islampdiv
div
div className=flex items-center gap-4
{appUser.role === 'admin' && (button onClick={() = { setActiveTab('admin'); fetchDashboardData(); }} className={`text-[#00897B] font-bold text-sm px-3 py-1 rounded transition-colors ${activeTab === 'admin' 'bg-[#E0F2F1]' ''}`}ADMIN PANELbutton)}
{appUser (div onClick={() = setShowProfileModal(true)} className=flex items-center gap-2 bg-slate-100 hoverbg-slate-200 px-3 py-1.5 rounded-full cursor-pointer transition-colorsdiv className=w-6 h-6 bg-[#00BCD4] rounded-full flex items-center justify-center text-white text-xs font-bold{appUser.firstName.charAt(0)}divspan className=text-sm font-bold text-slate-700 hidden smblock{appUser.firstName}spandiv) (button onClick={() = setShowLoginModal(true)} className=bg-[#00BCD4] hoverbg-[#00ACC1] text-white px-6 py-2 rounded-full font-bold text-sm flex items-center gap-1 transition-allLogin span className=text-lg→spanbutton)}
div
div
nav
main className=max-w-6xl mx-auto pb-12
{activeTab === 'home' && (
div className=px-4 pt-12 pb-8 flex flex-col mdflex-row items-center gap-8
div className=flex-1 w-fullh1 className=text-3xl mdtext-4xl font-extrabold text-slate-900 mb-4 leading-tightNational Equipment br Identity Register (NEIR)h1p className=text-slate-600 mb-8 text-base mdtext-lg leading-relaxedVerify your phone's IMEI number with the official Bangladesh Mobile Device Database. Find out if your device is authentic, imported legally, and not reported as lost, stolen, or cloned.pdiv className=bg-white rounded-full p-1.5 shadow-lg flex items-center border border-slate-200 w-full max-w-lginput type=text placeholder=Enter IMEI number className=flex-1 px-6 py-3 outline-none text-slate-700 placeholdertext-slate-400 bg-transparent value={checkInput} onChange={(e) = setCheckInput(e.target.value)} maxLength={15} HelpCircle size={20} className=text-slate-300 mr-2button onClick={handleCheckIMEI} disabled={loading} className=bg-[#00BCD4] hoverbg-[#00ACC1] text-white px-6 py-3 rounded-full font-bold text-sm uppercase flex items-center gap-2 transition-colors{loading Loader2 className=animate-spin w-4 h-4 check span className=text-lg→span}buttondiv{checkResult && (div className={`mt-6 p-4 rounded-lg border-l-4 animate-in fade-in slide-in-from-top-2 ${checkResult === 'registered' 'bg-green-50 border-green-500' 'bg-red-50 border-red-500'}`}div className=flex items-center gap-3{checkResult === 'registered' CheckCircle className=text-green-600 ShieldAlert className=text-red-600}divh4 className={`font-bold ${checkResult === 'registered' 'text-green-800' 'text-red-800'}`}{checkResult === 'registered' 'Device Verified!' 'Not Registered'}h4p className=text-xs text-slate-600{checkResult === 'registered' 'This IMEI is valid and found in NEIR database.' 'This IMEI is NOT found in our database.'}pdivdivdiv)}div
div className=flex-1 w-full flex justify-center mdjustify-enddiv className=bg-[#00897B] rounded-3xl p-8 shadow-2xl relative overflow-hidden w-full max-w-md h-[400px]div className=absolute top-10 left-10 bg-white10 p-4 rounded-xl backdrop-blur-sm border border-white20Database className=text-white w-12 h-12 divdiv className=absolute bottom-10 left-10 bg-white10 p-4 rounded-xl backdrop-blur-sm border border-white20Search className=text-white w-12 h-12 divdiv className=absolute top-12 right-[-20px] transform -translate-y-12 w-48 h-80 bg-white rounded-3xl border-8 border-slate-800 shadow-2xl flex flex-col p-2div className=w-16 h-4 bg-slate-100 rounded-full mx-auto mb-4divdiv className=space-y-3 px-2div className=h-2 bg-slate-100 rounded w-fulldivdiv className=h-2 bg-slate-100 rounded w-34divdiv className=h-10 bg-[#E0F2F1] rounded flex items-center justify-center mt-4span className=font-mono text-[10px] text-[#00897B] font-bold899500...spandivdivdiv className=mt-auto flex justify-center pb-2div className=w-8 h-8 rounded-full border-2 border-slate-100divdivdivdivdiv
div
div className=bg-white py-16 px-4 mt-8div className=max-w-4xl mx-auto text-centerh2 className=text-2xl font-bold text-slate-800 mb-123 Steps & br Check Phone Registration Status by IMEIh2div className=grid mdgrid-cols-3 gap-8div className=flex flex-col items-centerdiv className=w-40 h-64 bg-slate-50 border-2 border-slate-200 rounded-3xl flex flex-col items-center justify-center p-4 shadow-smMessageSquare className=w-12 h-12 text-[#00BCD4] mb-2 p className=text-[10px] text-slate-400 text-centerType KYD & IMEIpdivdiv className=mt-6 text-centerh3 className=font-bold text-lg mb-2Step 1h3p className=text-sm text-slate-500Go to your mobile's message option and type KYD, space, then 15 digit IMEI.pdivdivdiv className=flex flex-col items-centerdiv className=w-40 h-64 bg-slate-50 border-2 border-slate-200 rounded-3xl flex flex-col items-center justify-center p-4 shadow-smSend className=w-12 h-12 text-[#00BCD4] mb-2 div className=bg-[#00BCD4] text-white text-xs px-2 py-1 rounded mt-216002divdivdiv className=mt-6 text-centerh3 className=font-bold text-lg mb-2Step 2h3p className=text-sm text-slate-500Send the message to 16002.pdivdivdiv className=flex flex-col items-centerdiv className=w-40 h-64 bg-slate-50 border-2 border-slate-200 rounded-3xl flex flex-col items-center justify-center p-4 shadow-smdiv className=w-16 h-16 bg-[#00897B] rounded-full flex items-center justify-center text-whiteCheckCircle size={32} divp className=text-xs font-bold text-[#00897B] mt-2Status Validpdivdiv className=mt-6 text-centerh3 className=font-bold text-lg mb-2Step 3h3p className=text-sm text-slate-500You will instantly receive a return message with the validity status.pdivdivdivdivdiv
)}
{activeTab === 'admin' && appUser.role === 'admin' && (
AdminPanel stats={stats} adminInput={adminInput} setAdminInput={setAdminInput} handleSingleAdd={handleSingleAdd} loading={loading} adminMsg={adminMsg} handleCSVUpload={handleCSVUpload} csvFile={csvFile} setCsvFile={setCsvFile} fileInputRef={fileInputRef} isUploading={isUploading} uploadProgress={uploadProgress} imeiList={imeiList} handleDelete={handleDelete} fetchDashboardData={fetchDashboardData}
)}
main
{showLoginModal && AuthModal type=login close={() = setShowLoginModal(false)} openSignup={() = { setShowLoginModal(false); setShowSignupModal(true); }} onLoginSubmit={handleAppLogin} onSuccess={(role) = { setShowLoginModal(false); if(role === 'admin') { setActiveTab('admin'); fetchDashboardData(); } }} }
{showSignupModal && AuthModal type=signup close={() = setShowSignupModal(false)} openLogin={() = { setShowSignupModal(false); setShowLoginModal(true); }} onSignupSubmit={handleAppSignup} onSuccess={() = setShowSignupModal(false)} }
{showProfileModal && appUser && (div className=fixed inset-0 bg-black60 backdrop-blur-sm z-50 flex items-center justify-center p-4div className=bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden animate-in zoom-in-95 duration-200 relativediv className=bg-[#E0F7FA] p-6 text-center relativebutton onClick={() = setShowProfileModal(false)} className=absolute right-4 top-4 text-slate-400 hovertext-slate-600X size={24}buttondiv className=w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg border-2 border-[#00BCD4]span className=text-3xl font-bold text-[#00BCD4]{appUser.firstName.charAt(0)}spandivh3 className=text-xl font-bold text-slate-800{appUser.firstName} {appUser.lastName}h3p className=text-sm text-slate-500@{appUser.username}pspan className={`inline-block mt-2 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider ${appUser.role === 'admin' 'bg-indigo-100 text-indigo-700' 'bg-green-100 text-green-700'}`}{appUser.role} Accountspandivdiv className=p-6 space-y-4div className=flex items-center gap-3 p-3 bg-slate-50 rounded-lgPhone className=text-slate-400 w-5 h-5 divp className=text-xs text-slate-400 uppercase font-boldMobile Numberpp className=text-sm font-medium text-slate-700{appUser.mobile 'NA'}pdivdivdiv className=flex items-center gap-3 p-3 bg-slate-50 rounded-lgShield className=text-slate-400 w-5 h-5 divp className=text-xs text-slate-400 uppercase font-boldAccount Statuspp className=text-sm font-medium text-green-600 flex items-center gap-1Active CheckCircle size={12}pdivdivbutton onClick={handleLogout} className=w-full bg-red-50 hoverbg-red-100 text-red-600 font-bold py-3 rounded-xl transition-colors flex justify-center items-center gap-2 mt-4LogOut size={18} Logoutbuttondivdivdiv)}
footer className=bg-white border-t py-8 text-center text-sm text-slate-400p© 2026 all rights reserved Shoriful Islampdiv className=flex justify-center gap-4 mt-2 text-[#00BCD4]spanPrivacy PolicyspanspanTerms of Servicespandivfooter
div
);
}
const root = createRoot(document.getElementById('root'));
root.render(App );
script
body
html