Notes

import "./AdminDashboard.css"; // Separate CSS file

const AdminDashboard = () => {
return (
<div className="dashboard-container">
<header className="dashboard-header">
<h1>Welcome, John</h1>
<div className="search-box">
<input type="text" placeholder="Search" />
</div>
</header>

<nav className="dashboard-nav">
<ul>
<li className="active">All accounts</li>
<li>
Policy approvals <span className="badge">12</span>
</li>
<li>
Reactivation requests <span className="badge">2</span>
</li>
<li>Payments</li>
</ul>
</nav>

<div className="Admintable-container">
<table className="admintable">
<thead>
<tr>
<th>Account name</th>
<th>Email</th>
<th>No. of policies</th>
<th>Account since</th>
<th>Last sign in</th>
<th>Account status</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{/* Sample Data Rows */}
{Array.from({ length: 8 }).map((_, index) => (
<tr key={index}>
<td>Jane Doe</td>
<td>[email protected]</td>
<td>4</td>
{/* <td>{Math.floor(Math.random() * 5)}</td> */}
<td>4/8/2020</td>
<td>4/8/2020</td>
<td className="status-outstanding">
<span> Active/Inactive</span>
</td>
<td>
<div className="threedots">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"/>
</svg></div>
</td>

<td>
<Button
variant="secondary-on-light"
className="policy-btn-header"
label="View Account"
size="medium"
/>
</td>
</tr>
))}
</tbody>
</table>
<div className="pagination">
<span>1-8 of 8</span>
<div className="pagination-controls">
{/* <button>&lt;</button> */}
{/* <button className="active">1</button> */}
{/* <button>&gt;</button> */}
</div>
<span>Rows per page: 10</span>
</div>
</div>
</div>
);
};

export default AdminDashboard;

-------------------------------------------------------------------------------


dashboard-container {
padding: 20px;
max-width: 1400px;
margin: 0 auto;
display: flex;
flex-direction: column;
background-color: #F6F7F8;

width: 100vw;
height: 100vh;
max-width: 100%;
}

/* Header Section */
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}

.dashboard-header h1 {
font-size: 24px;
font-weight: 700;
}

.search-box input {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
/* border-radius: 4px; */
width: 200px;
}

/* Navigation bar */
.dashboard-nav ul {
display: flex;
gap: 20px;
padding: 0;
margin: 20px 0;
list-style: none;
border-bottom: 2px solid #e0e0e0;
}

.dashboard-nav ul li {
font-size: 16px;
padding-bottom: 10px;
cursor: pointer;


}

.dashboard-nav ul li.active {
font-weight: bold;
border-bottom: 2px solid #007bff;
}

.dashboard-nav ul li .badge {
background-color: #007bff;
color: white;
/* border-radius: 12px; */
padding: 3px 8px;
font-size: 12px;
margin-left: 5px;

}

/* Table styling */
.Admintable-container {
background: white;
/* border-radius: 8px; */
padding: 20px;
/* box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); */
overflow-x: auto;
}

.admintable {
width: 100%;
border-collapse: collapse;

}

thead th {
font-weight: bold;
padding-bottom: 5px;
text-align: left;
font-size: 14px;
border-bottom: 1px solid #e0e0e0;
/* width: 10px; */
/* background-color: #007bff; */

}


tbody td {
padding: 10px 0;
border-bottom: 1px solid #e0e0e0;
/* padding: 10px 8px 4px 0px; */

}

/* .status .active {
background-color: #d4f5e9;
color: #26b97f;
padding: 4px 10px;
border-radius: 12px;
} */

/* .status .inactive {
background-color: #f8d7da;
color: #c43e47;
padding: 4px 10px;
border-radius: 12px;
} */

/* Button styling */
/* .view-account-btn {
background-color: transparent;
border: 1px solid #007bff;
color: #007bff;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
} */

/* .view-account-btn:hover {
background-color: #007bff;
color: white;
} */

/* Pagination styling */
.pagination {
display: flex;
justify-content: space-between;
padding: 10px 0;
align-items: center;
font-size: 14px;
}

.pagination-controls button {
background-color: transparent;
border: none;
font-size: 18px;
cursor: pointer;
}

.pagination-controls .active {
font-weight: bold;
}

/* Responsive Design */
@media (max-width: 768px) {
.dashboard-header h1 {
font-size: 20px;
}
.dashboard-nav ul {
flex-direction: column;
gap: 10px;
}
.dashboard-container {
padding: 10px;
}
.table-container {
padding: 15px;
}
.search-box input {
width: 100%;
padding: 8px;
}
}

@media (max-width: 480px) {
.dashboard-header h1 {
font-size: 18px;
}
.table-container table {
font-size: 12px;
}
}