Skip to content

Commit

Permalink
updated table in projects screen
Browse files Browse the repository at this point in the history
  • Loading branch information
Katleho-codes committed Apr 27, 2023
1 parent e4002a2 commit 0ac8aaa
Show file tree
Hide file tree
Showing 13 changed files with 158 additions and 83 deletions.
128 changes: 128 additions & 0 deletions public/_data/table.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
function getRandomDate() {
const maxDate = Date.now();
const timestamp = Math.floor(Math.random() * maxDate);
return new Date(timestamp);
}

const tableData = [
{
id: 1,
model: "UX9XG2",
problem: "Screen cracked",
category: "Mobile",
assessDate: "08 April 2023",
assessComplete: "08 April 2023",
repairDate: "09 April 2023",
repairComplete: "10 April 2023",
status: "",
tech: "Nicolas",
},
{
id: 2,
model: "LKRA2Q",
problem: "Slow Phone",
category: "Mobile",
assessDate: "08 April 2023",
assessComplete: "08 April 2023",
repairDate: "09 April 2023",
repairComplete: "10 April 2023",
status: "",
tech: "Jessica",
},
{
id: 3,
model: "896C1D",
problem: "Bad Battery Life",
category: "Mobile",
assessDate: "08 April 2023",
assessComplete: "08 April 2023",
repairDate: "09 April 2023",
repairComplete: "10 April 2023",
status: "",
tech: "Steven",
},
{
id: 4,
model: "DU0NSZ",
problem: "Overheating Phone",
category: "Mobile",
assessDate: "08 April 2023",
assessComplete: "08 April 2023",
repairDate: "09 April 2023",
repairComplete: "10 April 2023",
status: "",
tech: "Willard",
},
{
id: 5,
model: "95PZXE",
problem: "App Crashes / Freezes",
category: "Mobile",
assessDate: "08 April 2023",
assessComplete: "08 April 2023",
repairDate: "09 April 2023",
repairComplete: "10 April 2023",
status: "",
tech: "Kezia",
},
{
id: 6,
model: "CSE7Q0",
problem: "Apps Not Downloading",
category: "Mobile",
assessDate: "08 April 2023",
assessComplete: "08 April 2023",
repairDate: "09 April 2023",
repairComplete: "10 April 2023",
status: "",
tech: "Krish",
},
{
id: 7,
model: "1WCZ3K",
problem: "MicroSD Card Not Working",
assessDate: "08 April 2023",
assessComplete: "08 April 2023",
repairDate: "09 April 2023",
repairComplete: "10 April 2023",
status: "",
tech: "Lillian",
},
{
id: 8,
model: "RX0YF5",
problem: "Damaged Charging Port",
category: "Mobile",
assessDate: "08 April 2023",
assessComplete: "08 April 2023",
repairDate: "09 April 2023",
repairComplete: "10 April 2023",
status: "",
tech: "John",
},
{
id: 9,
model: "Z9YK0C",
problem: "Connectivity Issues",
category: "Mobile",
assessDate: "08 April 2023",
assessComplete: "08 April 2023",
repairDate: "09 April 2023",
repairComplete: "10 April 2023",
status: "",
tech: "Olivier",
},
{
id: 10,
model: "FE7NSM",
problem: "The Screen Is Not Bright Enough",
category: "Mobile",
assessDate: "08 April 2023",
assessComplete: "08 April 2023",
repairDate: "09 April 2023",
repairComplete: "10 April 2023",
status: "",
tech: "Sandra",
},
];
export { tableData, getRandomDate };
Binary file added public/images/1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/10.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/4.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/5.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/6.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/7.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/8.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/9.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 2 additions & 47 deletions src/pages/dashboard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ function classNames(...classes) {

function Dashboard() {
let [categories] = useState({
Table: [
Recent: [
{
id: 1,
title: 'Does drinking coffee make you smarter?',
Expand All @@ -28,7 +28,7 @@ function Dashboard() {
shareCount: 2,
},
],
Graph: [
Popular: [
{
id: 1,
title: 'Is tech making coffee better or worse?',
Expand Down Expand Up @@ -61,51 +61,6 @@ function Dashboard() {
},
],
})

const data = [
{
name: 'Page A',
uv: 4000,
pv: 2400,
amt: 2400,
},
{
name: 'Page B',
uv: 3000,
pv: 1398,
amt: 2210,
},
{
name: 'Page C',
uv: 2000,
pv: 9800,
amt: 2290,
},
{
name: 'Page D',
uv: 2780,
pv: 3908,
amt: 2000,
},
{
name: 'Page E',
uv: 1890,
pv: 4800,
amt: 2181,
},
{
name: 'Page F',
uv: 2390,
pv: 3800,
amt: 2500,
},
{
name: 'Page G',
uv: 3490,
pv: 4300,
amt: 2100,
},
];
return (
<>
<Navbar />
Expand Down
64 changes: 28 additions & 36 deletions src/pages/projects/index.tsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,52 @@
import React from 'react'
import Navbar from '../../../components/Navbar'
import InputField from '../../../components/InputField'
import { tableData } from '../../../public/_data/table'

export default function Projects() {
return (
<>
<Navbar />

<main>
<div className="container flex justify-center flex-col mx-auto">
<div className="container flex justify-center flex-col mx-auto p-2">
<section className="my-4">
<h1 className="text-5xl font-bold">Projects</h1>
<h1 className="text-5xl font-semibold">Projects</h1>
</section>
<section className="my-4">
<InputField className="searchInput input" name="search" type="search" placeholder="Search here" />
</section>
<section className="w-full overflow-x-auto">
<table className="mt-4 border-collapse table-auto">
<thead className="bg-gray-100">
<thead className="bg-gray-100 text-gray-800">
<tr>
<th>Units</th>
<th>Unit name</th>
<th>Date assessed</th>
<th>Assessment completion date</th>
<th>Date completed</th>
<th>Status</th>
<th>Technician</th>
<th>Progress</th>
<th>Unit problem</th>
<th className="text-gray-800 font-sans font-semibold text-center">Unit Model</th>
<th className="text-gray-800 font-sans font-semibold text-center">Unit Problem</th>
<th className="text-gray-800 font-sans font-semibold text-center">Category</th>
<th className="text-gray-800 font-sans font-semibold text-center">Date Assessed</th>
<th className="text-gray-800 font-sans font-semibold text-center">Assessment Completion</th>
<th className="text-gray-800 font-sans font-semibold text-center">Repair Date</th>
<th className="text-gray-800 font-sans font-semibold text-center">Repair Completed</th>
<th className="text-gray-800 font-sans font-semibold text-center">Status</th>
<th className="text-gray-800 font-sans font-semibold text-center">Technician</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
<td>Malcolm Lockyer</td>
<td>1961</td>
<td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
<td>Malcolm Lockyer</td>
<td>1961</td>
</tr>
<tr>
<td>Witchy Woman</td>
<td>The Eagles</td>
<td>1972</td>
<td>Witchy Woman</td>
<td>The Eagles</td>
<td>1972</td>
</tr>
<tr>
<td>Shining Star</td>
<td>Earth, Wind, and Fire</td>
<td>1975</td>
<td>Shining Star</td>
<td>Earth, Wind, and Fire</td>
<td>1975</td>
</tr>
{
tableData.map((item) => (
<tr key={item.id}>
<td className="text-gray-800 font-sans font-normal text-center">{item.model}</td>
<td className="text-gray-800 font-sans font-normal text-center">{item.problem}</td>
<td className="text-gray-800 font-sans font-normal text-center">{item.category}</td>
<td className="text-gray-800 font-sans font-normal text-center">{item.assessDate}</td>
<td className="text-gray-800 font-sans font-normal text-center">{item.assessComplete}</td>
<td className="text-gray-800 font-sans font-normal text-center">{item.repairDate}</td>
<td className="text-gray-800 font-sans font-normal text-center">{item.repairComplete}</td>
<td className="text-gray-800 font-sans font-normal text-center">{item.status}</td>
<td className="text-gray-800 font-sans font-normal text-center">{item.tech}</td>
</tr>
))
}
</tbody>
</table>
</section>
Expand Down

0 comments on commit 0ac8aaa

Please sign in to comment.