My Admin Dashboard Returned a 404... But the Route Existed

[https://www.webshastraa.in/admin](https://www.webshastraa.in/admin)

/admin  →  (Redirect)  →  /admin/leads

404 | This page could not be found.

app/
 └── admin/
      └── leads/
           └── page.tsx  <-- The file was definitely here.

1export default function LeadsDashboard() {
2  // 🚨 THE FATAL FLAW: Using a variable before it is initialized
3  const filteredLeads = useMemo(() => {
4    return leads.filter(lead => lead.status === 'NEW');
5  }, [leads]);
6
7  // The state declaration happens AFTER the hook tries to use it
8  const [leads, setLeads] = useState([]);
9
10  return (
11    <DashboardLayout>
12       <LeadTable data="{filteredLeads}"/>
13    </DashboardLayout>
14  );
15}
16

ReferenceError: Cannot access 'leads' before initialization

1export default function LeadsDashboard() {
2  // 1. Declare the state first (Variable is initialized)
3  const [leads, setLeads] = useState([]);
4
5  // 2. Now the hook can safely reference 'leads'
6  const filteredLeads = useMemo(() => {
7    return leads.filter(lead => lead.status === 'NEW');
8  }, [leads]);
9
10  return (
11    <DashboardLayout>
12       <LeadTable data="{filteredLeads}"/>
13    </DashboardLayout>
14  );
15}
16

console.log(user); // Attempting to use the variable early

const user = { name: "Admin" };

1// app/admin/leads/error.tsx
2'use client' // Error components must be Client Components
3
4export default function LeadsError({ error, reset }) {
5  return (
6    <div className="p-10 bg-red-950 text-red-500 rounded-lg">
7      <h2>Something went wrong in the Dashboard!</h2>
8      <p className="font-mono mt-4">{error.message}</p>
9      <button onClick={() => reset()} className="mt-6 bg-red-800 text-white p-2">
10        Try again
11      </button>
12    </div>
13  );
14}
15