Scribd
Upload
11 views6 pages

Phone Number Tracking Tool

The PhoneNumberTracker component allows users to track phone numbers by entering a number and selecting a country code. It provides detailed information about the carrier, location, and risk level of the number, while maintaining a history of recent searches. The component also features statistics on tracking activity and highlights functionalities like carrier identification and spam detection.

Uploaded by

mypc3312
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views6 pages

Phone Number Tracking Tool

The PhoneNumberTracker component allows users to track phone numbers by entering a number and selecting a country code. It provides detailed information about the carrier, location, and risk level of the number, while maintaining a history of recent searches. The component also features statistics on tracking activity and highlights functionalities like carrier identification and spam detection.

Uploaded by

mypc3312
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import { useState, useEffect } from 'react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from


'/components/ui/card';
import { Button } from '/components/ui/button';
import { Input } from '/components/ui/input';
import { Label } from '/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from
'/components/ui/select';

export default function PhoneNumberTracker() {


const [phoneNumber, setPhoneNumber] = useState('');
const [countryCode, setCountryCode] = useState('+1');
const [searchHistory, setSearchHistory] = useState<Array<{number: string,
timestamp: string, location: string}>>([]);
const [isSearching, setIsSearching] = useState(false);
const [searchResult, setSearchResult] = useState<any>(null);

// Mock data for demonstration


const mockTrackingData = {
'1234567890': {
carrier: 'Verizon Wireless',
location: 'New York, NY',
timezone: 'EST',
active: true,
registrationDate: '2022-03-15',
riskScore: 12,
spamReports: 2
},
'9876543210': {
carrier: 'AT&T',
location: 'Los Angeles, CA',
timezone: 'PST',
active: false,
registrationDate: '2020-11-22',
riskScore: 45,
spamReports: 8
}
};

const handleSearch = () => {


if (!phoneNumber) return;

setIsSearching(true);

// Simulate API call delay


setTimeout(() => {
const fullNumber = countryCode + phoneNumber;
const result = mockTrackingData[phoneNumber] || null;

if (result) {
setSearchResult(result);
// Add to search history
setSearchHistory(prev => [
{
number: fullNumber,
timestamp: new Date().toLocaleString(),
location: [Link]
},
...[Link](0, 4) // Keep only last 5 searches
]);
} else {
setSearchResult({
carrier: 'Unknown',
location: 'Location data unavailable',
timezone: 'Unknown',
active: false,
registrationDate: 'N/A',
riskScore: 0,
spamReports: 0
});
}

setIsSearching(false);
}, 1500);
};

useEffect(() => {
// Load search history from localStorage on component mount
const savedHistory = [Link]('phoneTrackerHistory');
if (savedHistory) {
setSearchHistory([Link](savedHistory));
}
}, []);

useEffect(() => {
// Save search history to localStorage whenever it changes
[Link]('phoneTrackerHistory', [Link](searchHistory));
}, [searchHistory]);

const getRiskLevel = (score: number) => {


if (score < 20) return { text: 'Low', color: 'text-green-600' };
if (score < 40) return { text: 'Medium', color: 'text-yellow-600' };
return { text: 'High', color: 'text-red-600' };
};

return (
<div className="min-h-screen bg-background p-4 md:p-8">
<div className="max-w-6xl mx-auto">
{/* Header */}
<header className="text-center mb-8 md:mb-12">
<h1 className="text-3xl md:text-4xl font-bold text-foreground mb-2">
Phone Number Tracker
</h1>
<p className="text-muted-foreground md:text-lg">
Track phone numbers and get detailed information about carriers,
locations, and more
</p>
</header>

{/* Main Content */}


<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
{/* Search Section */}
<div className="lg:col-span-2">
<Card>
<CardHeader>
<CardTitle>Track a Phone Number</CardTitle>
<CardDescription>
Enter a phone number to get detailed tracking information
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex flex-col sm:flex-row gap-4">
<div className="w-full sm:w-auto">
<Label htmlFor="country-code" className="mb-2 block">Country
Code</Label>
<Select value={countryCode} onValueChange={setCountryCode}>
<SelectTrigger className="w-full sm:w-[140px]">
<SelectValue placeholder="Code" />
</SelectTrigger>
<SelectContent>
<SelectItem value="+1">+1 (US/CA)</SelectItem>
<SelectItem value="+44">+44 (UK)</SelectItem>
<SelectItem value="+49">+49 (DE)</SelectItem>
<SelectItem value="+33">+33 (FR)</SelectItem>
<SelectItem value="+91">+91 (IN)</SelectItem>
<SelectItem value="+86">+86 (CN)</SelectItem>
<SelectItem value="+81">+81 (JP)</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex-1">
<Label htmlFor="phone-number" className="mb-2 block">Phone
Number</Label>
<Input
id="phone-number"
type="tel"
placeholder="Enter phone number"
value={phoneNumber}
onChange={(e) => setPhoneNumber([Link](/\D/g,
''))}
className="w-full"
/>
</div>
</div>

<Button
onClick={handleSearch}
disabled={isSearching || !phoneNumber}
className="w-full sm:w-auto"
>
{isSearching ? 'Tracking...' : 'Track Number'}
</Button>
</CardContent>
</Card>

{/* Results Section */}


{searchResult && (
<Card className="mt-6">
<CardHeader>
<CardTitle>Tracking Results</CardTitle>
<CardDescription>
Information for {countryCode} {phoneNumber}
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-4">
<div>
<span className="text-sm
text-muted-foreground">Carrier:</span>
<p className="font-medium">{[Link]}</p>
</div>
<div>
<span className="text-sm text-muted-
foreground">Location:</span>
<p className="font-medium">{[Link]}</p>
</div>
<div>
<span className="text-sm text-muted-
foreground">Timezone:</span>
<p className="font-medium">{[Link]}</p>
</div>
</div>
<div className="space-y-4">
<div>
<span className="text-sm
text-muted-foreground">Status:</span>
<p className="font-medium">
<span className={`inline-flex items-center $
{[Link] ? 'text-green-600' : 'text-red-600'}`}>
<span className={`w-2 h-2 rounded-full mr-2 $
{[Link] ? 'bg-green-500' : 'bg-red-500'}`}></span>
{[Link] ? 'Active' : 'Inactive'}
</span>
</p>
</div>
<div>
<span className="text-sm text-muted-
foreground">Registration Date:</span>
<p className="font-
medium">{[Link]}</p>
</div>
<div>
<span className="text-sm text-muted-foreground">Risk
Level:</span>
<p className="font-medium">
<span
className={getRiskLevel([Link]).color}>
{getRiskLevel([Link]).text}
</span>
{` (${[Link]}/100)`}
</p>
</div>
</div>
</div>

{[Link] > 0 && (


<div className="mt-4 p-3 bg-yellow-100 border border-yellow-200
rounded-md">
<p className="text-sm text-yellow-800">
⚠️ This number has {[Link]} spam
report(s)
</p>
</div>
)}
</CardContent>
</Card>
)}
</div>

{/* Sidebar */}


<div className="space-y-6">
{/* Recent Searches */}
<Card>
<CardHeader>
<CardTitle>Recent Searches</CardTitle>
<CardDescription>Your last 5 tracked numbers</CardDescription>
</CardHeader>
<CardContent>
{[Link] > 0 ? (
<div className="space-y-3">
{[Link]((search, index) => (
<div key={index} className="flex justify-between items-center
py-2 border-b border-border last:border-b-0">
<div>
<p className="font-medium">{[Link]}</p>
<p className="text-xs text-muted-
foreground">{[Link]}</p>
</div>
<p className="text-xs text-muted-
foreground">{[Link]}</p>
</div>
))}
</div>
) : (
<p className="text-muted-foreground text-center py-4">No recent
searches</p>
)}
</CardContent>
</Card>

{/* Statistics */}


<Card>
<CardHeader>
<CardTitle>Tracking Statistics</CardTitle>
<CardDescription>Your tracking activity</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex justify-between">
<span className="text-muted-foreground">Total Searches:</span>
<span className="font-medium">{[Link]}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Low Risk
Numbers:</span>
<span className="font-medium text-green-600">2</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">High Risk
Numbers:</span>
<span className="font-medium text-red-600">1</span>
</div>
</div>
</CardContent>
</Card>

{/* Features */}


<Card>
<CardHeader>
<CardTitle>Features</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex items-start">
<div className="w-2 h-2 rounded-full bg-primary mt-2 mr-3"></div>
<span>Carrier identification</span>
</div>
<div className="flex items-start">
<div className="w-2 h-2 rounded-full bg-primary mt-2 mr-3"></div>
<span>Geolocation tracking</span>
</div>
<div className="flex items-start">
<div className="w-2 h-2 rounded-full bg-primary mt-2 mr-3"></div>
<span>Spam detection</span>
</div>
<div className="flex items-start">
<div className="w-2 h-2 rounded-full bg-primary mt-2 mr-3"></div>
<span>Risk assessment</span>
</div>
</CardContent>
</Card>
</div>
</div>

{/* Footer */}


<footer className="mt-12 pt-8 border-t border-border text-center text-sm
text-muted-foreground">
<p>Phone Number Tracker - For informational purposes only</p>
<p className="mt-1">Respect privacy and use responsibly</p>
</footer>
</div>
</div>
);
}

You might also like