393 lines
25 KiB
JavaScript
393 lines
25 KiB
JavaScript
"use client";
|
|
import Layout from "@/components/layout/Layout";
|
|
import { Flat } from "@alptugidin/react-circular-progress-bar";
|
|
import Link from "next/link";
|
|
import CounterUpDirectly from "@/components/elements/CounterUpDirectly";
|
|
import About2 from "@/components/sections/About2";
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export default function Report() {
|
|
const [reportData, setReportData] = useState(null);
|
|
const [reportResult, setReportResult] = useState(null);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
const storedData = sessionStorage.getItem("reportData");
|
|
const storedResult = sessionStorage.getItem("reportResult");
|
|
if (storedData) {
|
|
try {
|
|
const parsedData = JSON.parse(storedData);
|
|
setReportData(parsedData);
|
|
} catch (error) {
|
|
console.error("Error parsing JSON from sessionStorage", error);
|
|
setReportData(null);
|
|
}
|
|
} else {
|
|
setReportData(null);
|
|
router.push("/");
|
|
}
|
|
|
|
if (storedResult) {
|
|
try {
|
|
const parsedResult = JSON.parse(storedResult);
|
|
setReportResult(parsedResult);
|
|
} catch (error) {
|
|
console.error("Error parsing JSON from sessionStorage", error);
|
|
setReportResult(null);
|
|
}
|
|
} else {
|
|
setReportResult(null);
|
|
router.push("/");
|
|
}
|
|
}, []);
|
|
|
|
let domainAuthority = reportResult?.domainAuthority;
|
|
let spamScore = reportResult?.spamScore;
|
|
let authority = reportResult?.rankingKeywords;
|
|
|
|
let backlinks = reportResult?.backlinksTotal;
|
|
let backlinksSuffix = "";
|
|
if (backlinks > 1000 && backlinks < 1000000) {
|
|
backlinksSuffix = "K";
|
|
backlinks = backlinks / 1000;
|
|
} else if (backlinks > 1000000) {
|
|
backlinksSuffix = "M";
|
|
backlinks = backlinks / 1000000;
|
|
}
|
|
|
|
const formatCount = (value) => {
|
|
if (value >= 1000000) {
|
|
return (value / 1000000).toFixed(1);
|
|
} else if (value >= 1000) {
|
|
return (value / 1000).toFixed(1);
|
|
}
|
|
return value;
|
|
};
|
|
|
|
backlinks = formatCount(backlinks);
|
|
|
|
let overallScore;
|
|
|
|
if (domainAuthority < 91) {
|
|
overallScore = Math.floor(domainAuthority * 1.1);
|
|
} else {
|
|
overallScore = domainAuthority;
|
|
}
|
|
|
|
const averageScore = 74;
|
|
let comparison;
|
|
|
|
if (overallScore > averageScore) {
|
|
comparison = "higher";
|
|
} else if (overallScore < averageScore) {
|
|
comparison = "lower";
|
|
} else {
|
|
comparison = "the same";
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{reportData && reportResult && (
|
|
<Layout headerStyle={4} footerStyle={3} transparent={false}>
|
|
<section className="report-area">
|
|
<div className="container">
|
|
<div className="report-box">
|
|
<div className="col">
|
|
<div className="header-design">
|
|
<img src="/assets/img/images/h2_about_shape01.png" alt="cosmetic" />
|
|
<img src="/assets/img/images/h2_about_shape02.png" alt="cosmetic" />
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-xl-2 col-lg-2 col-md-12">
|
|
<div className="report-graph-size">
|
|
<Flat
|
|
progress={overallScore}
|
|
range={{ from: 0, to: 100 }}
|
|
sign={{ value: "", position: "end" }}
|
|
text={"of 100"}
|
|
showMiniCircle={true}
|
|
showValue={true}
|
|
sx={{
|
|
strokeColor: "#3887fe",
|
|
barWidth: 10,
|
|
bgStrokeColor: "#3887fe",
|
|
bgColor: { value: "#000000", transparency: "20" },
|
|
shape: "full",
|
|
strokeLinecap: "round",
|
|
valueSize: 25,
|
|
valueWeight: "bold",
|
|
valueColor: "#000000",
|
|
valueFamily: "Helvetica",
|
|
textSize: 13,
|
|
textWeight: "normal",
|
|
textColor: "#000000",
|
|
textFamily: "Helvetica",
|
|
loadingTime: 2000,
|
|
valueAnimation: true,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-xl-10 col-lg-10 col-md-12">
|
|
<h1 className="text-black report-text-title">
|
|
Site Audit Result for{" "}
|
|
<span className="text-primary">{reportResult.websiteName}</span>
|
|
</h1>
|
|
<Link
|
|
className="report-text-title-url"
|
|
href={`https://${reportResult.websiteName}`}
|
|
>
|
|
https://{reportResult.websiteName}
|
|
</Link>
|
|
<p className="report-text text-black">
|
|
<b>{reportResult.websiteName}</b> received an SEO score of{" "}
|
|
<b>{overallScore}</b> out of <b>100</b>, which is <b>{comparison} </b>
|
|
than the average score of <b>{averageScore}</b>. Our preliminary
|
|
analysis has identified{" "}
|
|
<b>
|
|
{reportResult.errorIssueCount + reportResult.importantIssueCount}{" "}
|
|
Crucial Issues
|
|
</b>{" "}
|
|
that should be addressed in order to improve your website's search
|
|
visibility.
|
|
</p>
|
|
<div className="report-button-group">
|
|
<Link className="btn report-button" href="#domain">
|
|
Domain Overview
|
|
</Link>
|
|
<Link className="btn report-button" href="#issue">
|
|
Errors - {reportResult.errorIssueCount}
|
|
</Link>
|
|
<Link className="btn report-button" href="#issue">
|
|
Warnings - {reportResult.importantIssueCount}
|
|
</Link>
|
|
<Link className="btn report-button" href="#potentials">
|
|
Growth Potentials
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="container" id="domain">
|
|
<div className="row justify-content-center">
|
|
<div className="col">
|
|
<div className="report-box">
|
|
<div className="col">
|
|
<h1 className="text-black report-text-title">Domain Overview</h1>
|
|
<div className="row domain-overview-group text-center">
|
|
<div className="col-lg-3 col-md-6">
|
|
<div className="domain-overview-item">
|
|
<h4>Domain Authority</h4>
|
|
<h1>
|
|
<CounterUpDirectly count={domainAuthority} />
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-md-6">
|
|
<div className="domain-overview-item">
|
|
<h4>Backlinks</h4>
|
|
<h1 className="count">
|
|
<CounterUpDirectly count={backlinks} />
|
|
{backlinksSuffix}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-md-6">
|
|
<div className="domain-overview-item">
|
|
<h4>Page Authority</h4>
|
|
<h1>
|
|
<CounterUpDirectly count={authority} />
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-md-6">
|
|
<div className="domain-overview-item">
|
|
<h4>Spam Score</h4>
|
|
<h1>
|
|
<CounterUpDirectly count={spamScore} />%
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{61 <= spamScore ? (
|
|
<p className="report-text text-black">
|
|
A domain with a <b>bad spam score</b> is likely flagged in multiple
|
|
spam databases and may have a history of sending spammy or unwanted
|
|
emails. This score indicates a high risk of being{" "}
|
|
<b>blocked or filtered by email providers</b>, impacting email
|
|
deliverability significantly. It's crucial to
|
|
<b>investigate and address the reasons behind the bad score</b>,
|
|
such as cleaning email lists, avoiding spammy practices, and
|
|
improving overall domain reputation.
|
|
</p>
|
|
) : 31 <= spamScore >= 61 ? (
|
|
<p className="report-text text-black">
|
|
A domain with this spam score rate may have
|
|
<b>a moderate presence in spam databases</b> or could occasionally
|
|
send emails that some recipients may mark as spam. This score
|
|
doesn't necessarily indicate malicious intent but suggests that
|
|
there may be
|
|
<b>some instances where email deliverability could be affected</b>.
|
|
It's advisable to
|
|
<b>monitor and ensure best practices</b> to maintain or improve the
|
|
score over time.
|
|
</p>
|
|
) : (
|
|
<p className="report-text text-black">
|
|
A domain with a <b>low spam score</b> indicates that it has a
|
|
<b>minimal or negligible presence in spam databases</b>. This
|
|
suggests that the domain has a <b>clean reputation</b>, with little
|
|
to no reported incidents of spam activity. Websites with a good
|
|
score are typically trusted by email providers and less likely to be
|
|
flagged as spam when sending emails.
|
|
</p>
|
|
)}
|
|
<div className="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" className="text-center">
|
|
Most Visited Pages
|
|
</th>
|
|
<th scope="col" className="text-center">
|
|
Visibility
|
|
</th>
|
|
<th scope="col" className="text-center">
|
|
Page Authority
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{reportResult.mostDomain.map((item, index) => (
|
|
<tr key={index}>
|
|
<th scope="row">
|
|
{index + 1} -{" "}
|
|
<Link
|
|
href={`https://${item.url}`}
|
|
className="report-domain-url"
|
|
>
|
|
{item.url}
|
|
</Link>
|
|
</th>
|
|
<td className="report-icon-parent text-center">
|
|
{item.score < 39 ? (
|
|
<i className="report-icon red fas fa-times" />
|
|
) : item.score <= 59 ? (
|
|
<i className="report-icon yellow fas fa-exclamation" />
|
|
) : (
|
|
<i className="report-icon green fas fa-check" />
|
|
)}
|
|
</td>
|
|
<td className="text-center">{item.score}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="container" id="issue">
|
|
<div className="row justify-content-center">
|
|
<div className="col-lg-6">
|
|
<div className="report-box">
|
|
<div className="col">
|
|
<h1 className="text-black report-text-title">
|
|
Errors - {reportResult.errorIssueCount}
|
|
</h1>
|
|
<p className="report-text text-black">
|
|
These are the most significant issues currently
|
|
<b> preventing your website from achieving a higher ranking</b> in any
|
|
search engine, including Google Search.
|
|
</p>
|
|
<div className="report-list">
|
|
<ul className="list-wrap">
|
|
{reportResult?.errorList.map((error) => (
|
|
<li>
|
|
<i className="report-icon red fas fa-times" />
|
|
{error}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div className="report-box">
|
|
<div className="col">
|
|
<h1 className="text-black report-text-title">
|
|
Warnings - {reportResult.importantIssueCount}
|
|
</h1>
|
|
<p className="report-text text-black">
|
|
These are less significant, yet still important issues that should be
|
|
addressed and resolved in order to
|
|
<b> further enhance your website's Google search visibility.</b>
|
|
</p>
|
|
<div className="report-list">
|
|
<ul className="list-wrap">
|
|
{reportResult?.warningList.map((warning) => (
|
|
<li>
|
|
<i className="report-icon yellow fas fa-exclamation" />
|
|
{warning}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="container" id="potentials">
|
|
<div className="row justify-content-center">
|
|
<div className="col">
|
|
<div className="report-box">
|
|
<div className="col">
|
|
<h1 className="text-black report-text-title">Growth Potentials</h1>
|
|
<p className="report-text text-black">
|
|
A domain with a <b>low spam score</b> indicates that it has a{" "}
|
|
<b>minimal or negligible presence in spam databases</b>. This suggests
|
|
that the domain has a <b>clean reputation</b>, with little to no
|
|
reported incidents of spam activity. Websites with a good score are
|
|
typically trusted by email providers and less likely to be flagged as
|
|
spam when sending emails.
|
|
</p>
|
|
<div className="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr className="text-center">
|
|
<th scope="col">Variables</th>
|
|
<th scope="col">Current Metrics</th>
|
|
<th scope="col">Potentials Outcome</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{reportResult?.dataPotentials.map((item, index) => (
|
|
<tr key={index}>
|
|
<th scope="row">{item.variable}</th>
|
|
<td className="text-center">{item.current}</td>
|
|
<td className="text-center">{item.potentials}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<About2 />
|
|
</section>
|
|
</Layout>
|
|
)}
|
|
</>
|
|
);
|
|
}
|