Skip to content

Commit

Permalink
UI Enhancements (#55)
Browse files Browse the repository at this point in the history 
* Login width & Dashboard Enhancements

* View more button Enhancements

* Hompage routing fix enhancements

* UI Enhancements and Table structure changes
  • Loading branch information
@DanielEmmanuel1
DanielEmmanuel1 authored Nov 20, 2024
1 parent 159bda1 commit 6fe5629
Show file tree
Hide file tree
Showing 11 changed files with 370 additions and 458 deletions.
20 changes: 12 additions & 8 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import {
BrowserRouter as Router,
Route,
Routes,
// Navigate,
Navigate,
} from "react-router-dom";
import "./App.css";
// import { useContext } from 'react';
import { AuthProvider} from "./context/AuthContext";
import { AuthProvider } from "./context/AuthContext";
import PrivateRoute from "./context/PrivateRoute";
import PageLayout from './components/pages/PageLayout';
import LoginSection from "./components/pages/auth/LoginSection";
Expand All @@ -30,18 +30,22 @@ function App() {
{/* Login Routes */}
<Route path="/" element={<LoginSection />} />
<Route path="/login" element={<LoginSection />} />

{/* Protected Dashboard Routes */}
<Route path="/dashboard" element={<PrivateRoute><PageLayout/></PrivateRoute>}>
<Route index element={<HomePage/>}/>
<Route path="home" element={<HomePage/>}/>
<Route path="insights" element={<InsightsPage />}/>
<Route path="alerts" element={<AlertsPage />}/>
<Route path="/dashboard" element={<PrivateRoute><PageLayout /></PrivateRoute>}>
{/* Redirect /dashboard to /dashboard/home */}
<Route index element={<Navigate to="home" replace />} />
<Route path="home" element={<HomePage />} />
<Route path="insights" element={<InsightsPage />} />
<Route path="alerts" element={<AlertsPage />} />
<Route path="channels" element={<NewChannel />} />
</Route>

{/* 404 Page */}
<Route path="*" element={<NotFoundPage />} />
</Routes>
</Router>

</AuthProvider>
);
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/pages/auth/LoginSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ const LoginSection: React.FC = () => {
/>
</div>

<div className="col-span-6 sm:col-span-3">
<div className="col-span-6">
<label
htmlFor="Password"
className="block text-sm font-medium text-gray-700"
Expand All @@ -157,7 +157,7 @@ const LoginSection: React.FC = () => {
name="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="mt-1 w-full p-2 rounded-md border-gray-200 bg-white text-sm text-gray-700 shadow-sm"
className="mt-1 w-full p-2 rounded-md border-gray-200 bg-white text-sm text-gray-700 shadow-sm"
/>
</div>

Expand Down
107 changes: 107 additions & 0 deletions src/components/pages/dashboard/admins/ActivityTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import React, { useState } from "react";
import { Activity } from "../channels/ActivityTableData";

interface ActivityTableProps {
data: Activity[];
}

const ActivityTable: React.FC<ActivityTableProps> = ({ data }) => {
const [isModalOpen, setModalOpen] = useState(false);

const toggleModal = () => {
setModalOpen(!isModalOpen);
};

// Split data into two parts
const visibleData = data.slice(0, 5); // First 5 items
const modalData = data.slice(); // Remaining items

return (
<div>
{/* Table */}
<div className="overflow-x-auto border border-gray-200">
<table className="w-full border-collapse bg-white text-left text-sm">
<thead className="bg-[#03cf7a7b] border-2 border-[#03CF79] text-black">
<tr>
<th className="px-6 py-3 border-b font-medium">Channel Name</th>
<th className="px-6 py-3 border-b font-medium">Reach</th>
<th className="px-6 py-3 border-b font-medium">Timestamp</th>
</tr>
</thead>
<tbody>
{visibleData.map((activity, index) => (
<tr
key={index}
className="hover:bg-gray-50 border-b text-gray-700"
>
<td className="px-6 py-3">{activity.channelName}</td>
<td className="px-6 py-3 underline tracking-wider">
{activity.reach}
</td>
<td className="px-6 py-3">{activity.timestamp}</td>
</tr>
))}
</tbody>
</table>
</div>

{/* View More Button */}
{modalData.length > 0 && (
<div
className="flex justify-end"
onClick={toggleModal}
>
<p className="text-[#03CF79] py-3 w-fit text-right cursor-pointer hover:text-[#03cf7a9d]">View More</p>
</div>
)}

{/* Modal */}
{isModalOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
<div className="bg-white w-11/12 md:w-3/4 lg:w-1/2 rounded-lg shadow-lg p-6 relative px-8">
{/* Close Button */}
<button
className="absolute top-3 right-3 text-gray-500 hover:text-black"
onClick={toggleModal}
>
✕
</button>

{/* Modal Table */}
<div className="overflow-x-auto border border-gray-200">
<table className="w-full border-collapse bg-white text-left text-sm">
<thead className="bg-[#03cf7a7b] border-2 border-[#03CF79] text-black">
<tr>
<th className="px-6 py-3 border-b font-medium">
Channel Name
</th>
<th className="px-6 py-3 border-b font-medium">Reach</th>
<th className="px-6 py-3 border-b font-medium">
Timestamp
</th>
</tr>
</thead>
<tbody>
{modalData.map((activity, index) => (
<tr
key={index}
className="hover:bg-gray-50 border-b text-gray-700"
>
<td className="px-6 py-3">{activity.channelName}</td>
<td className="px-6 py-3 underline tracking-wider">
{activity.reach}
</td>
<td className="px-6 py-3">{activity.timestamp}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
)}
</div>
);
};

export default ActivityTable;
Loading

0 comments on commit 6fe5629

Please sign in to comment.