Skip to content

Commit 95d005c

Browse files
hunterachienghunterachieng
authored
Merge pull request #33 from akirachix/feature/new_responsiveness
responsive
2 parents 69f625b + cf64f62 commit 95d005c

File tree

21 files changed

+272
-206
lines changed

21 files changed

+272
-206
lines changed

‎carbontrack/src/app/compliance_page/page.tsx‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@ import useFetchCompliance from "../hooks/useFetchCompliance";
44
import useFetchFactories from "../hooks/useFetchFactories";
55
import Pagination from "../sharedComponents/Pagination";
66
import ComplianceTargetModal from "./component/AddTarget";
7-
import { IoPersonOutline, IoSettingsOutline } from "react-icons/io5";
87
import { updateCompliance } from "../utils/fetchCompliance";
98
import SidebarLayout from "../components/SideBarLayout";
10-
import Link from "next/link";
9+
1110

1211
interface Factory {
1312
factory_id: number;
@@ -148,14 +147,6 @@ export default function ComplianceDashboard() {
148147
<div>
149148
<h2 className="text-[2rem] font-bold">Compliance</h2>
150149
</div>
151-
<div className="flex space-x-4 items-center">
152-
<Link href="">
153-
<IoSettingsOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" />
154-
</Link>
155-
<Link href="/ktda-profile">
156-
<IoPersonOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" />
157-
</Link>
158-
</div>
159150
</div>
160151
{message && (
161152
<div
@@ -205,7 +196,7 @@ export default function ComplianceDashboard() {
205196
<table className="min-w-full text-left border-collapse border border-gray-700 lg:h-[60vh]">
206197
<thead className="bg-[#2A4759] text-white">
207198
<tr>
208-
<th className="p-3 border border-gray-700 w-1/3">Factory</th>
199+
<th className="p-3 border border-gray-700 w-1/3 xl:pb-2">Factory</th>
209200
<th className="p-3 border border-gray-700 w-1/3">
210201
Compliant status
211202
</th>
@@ -217,7 +208,7 @@ export default function ComplianceDashboard() {
217208
<tbody>
218209
{paginatedData.length === 0 ? (
219210
<tr>
220-
<td colSpan={3} className="p-4 text-center">
211+
<td colSpan={3} className="p-4 text-center ">
221212
No data found
222213
</td>
223214
</tr>
@@ -238,7 +229,7 @@ export default function ComplianceDashboard() {
238229
>
239230
{item.compliance_status}
240231
</td>
241-
<td className="p-3 border border-gray-700 italic text-gray-400">
232+
<td className="p-3 border border-gray-700 italic text-gray-400 ">
242233
{formatDate(item.updated_at) ||
243234
formatDate(item.created_at)}
244235
</td>

‎carbontrack/src/app/components/EditProfile/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,10 +139,10 @@ export default function EditProfilePage() {
139139
setIsSubmitting(false);
140140
}
141141
};
142-
142+
if (loading) return <div className="mt-32 text-center text-white">Loading...</div>;
143143
if (error) return <div className="mt-32 text-center text-red-500">{error}</div>;
144144
if (!profile) return null;
145-
if (loading) return <div className="mt-32 text-center text-white">Loading...</div>;
145+
146146

147147
return (
148148
<main className="min-h-screen bg-gradient-to-br from-gray-900 to-black text-white p-20">

‎carbontrack/src/app/components/SharedProfile/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@ import Image from "next/image";
99
export default function ProfileDisplay() {
1010
const router = useRouter();
1111
const { user: profile, error, loading } = useFetchUsers();
12-
13-
if (error) return <div className="mt-32 text-center text-red-500">{error}</div>;
14-
if (!profile) return null;
12+
1513
if (loading) return <div className="mt-32 text-center text-white">Loading...</div>;
14+
if (error) return <div className="mt-32 text-center text-red-500">{error}</div>;
15+
if (!profile) return null;
16+
1617

1718
const getProfileRoute = () => {
1819
return profile.user_type === "factory" ? "/edit-factory-profile" : "/ktda-edit-profile";

‎carbontrack/src/app/emissions/page.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,7 @@ export default function EmissionsHeatmapPage() {
7373
return (
7474
<SidebarLayout>
7575
<div className="flex flex-col items-center min-h-[calc(100vh-60px)] p-10">
76-
<div className="flex justify-end w-16 ml-350 space-x-4">
77-
<Link href=""><IoSettingsOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" /></Link>
78-
<Link href="/ktda-profile"><IoPersonOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" /></Link>
79-
</div>
76+
8077
<div className="font-bold 2xl:text-[48px] xl:text-[40px] lg:text-[19px] 2xl:ml-0 xl:ml-0 lg:ml-12 2xl:mb-[15px] xl:mb-[10px] lg:mb-[0px] tracking-wide w-full">Factory Emissions</div>
8178
<div className="bg-[#161C22] text-white rounded-[18px] shadow-[0_2px_24px_#0003] 2xl:p-[36px_40px] xl:p-[36px_40px] lg:p-[0px_0px] flex flex-col w-full 2xl:max-w-screen-2xl xl:max-w-screen-xl lg:max-w-screen-0.5xl 2xl:mt-10 xl:mt-1 lg:mt-0">
8279
<div className="2xl:mb-6 xl:mb-1 lg:mb-0 2xl:ml-0 xl:ml-0 lg:ml-5 2xl:pt-0 xl:pt-0 lg:pt-0.5 flex items-center">
@@ -114,7 +111,7 @@ export default function EmissionsHeatmapPage() {
114111
{boxes}
115112
</div>
116113
<div className="2xl:flex 2xl:flex-row xl:flex xl:flex-row lg:flex lg:flex-row items-start 2xl:ml-[2px] xl:ml-[px] lg:ml-[0px] flex-grow">
117-
<div className="relative 2xl:h-[320px] xl:h-[120px] lg:h-[120px] 2xl:ml-20 xl:ml-1 lg:ml-0 ">
114+
<div className="relative 2xl:h-[320px] xl:h-[120px] lg:h-[120px] 2xl:ml-20 xl:ml-10 lg:ml-0 ">
118115
<div
119116
className="rounded-[6px] border border-white block mt-[12px] 2xl:mr-[28px] xl:mr-[2px] lg:mr-[0px]"
120117
style={{

‎carbontrack/src/app/factory-dashboard/page.tsx‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
11
"use client";
22
import React from "react";
33
import "react-datepicker/dist/react-datepicker.css";
4-
import { BarChart, Bar, XAxis, YAxis, CartesianGrid,Tooltip, LineChart, Line, ResponsiveContainer,} from "recharts";
5-
import { IoSettingsOutline, IoPersonOutline } from "react-icons/io5";
4+
import {
5+
BarChart,
6+
Bar,
7+
XAxis,
8+
YAxis,
9+
CartesianGrid,
10+
Tooltip,
11+
LineChart,
12+
Line,
13+
ResponsiveContainer,
14+
} from "recharts";
15+
import { IoPersonOutline } from "react-icons/io5";
616
import { useFetchEmission } from "../hooks/useFetchEmissions";
717
import { useFetchEnergyEntries } from "../hooks/useFetchEnergyEntries";
818
import Link from "next/link";
@@ -24,13 +34,10 @@ export default function DashboardPage() {
2434
<FactoryLayout>
2535
<div className="bg-black text-white w-full min-h-screen flex flex-col">
2636
<MqttSubscriber />
27-
<main className="flex-1 p-4 md:p-8 overflow-auto w-full max-w-7xl mx-auto">
37+
<main className="flex-1 p-4 md:p-8 overflow-auto w-full max-w-9xl mx-auto">
2838
<div className="flex justify-end space-x-4 mb-4">
29-
<Link href="">
30-
<IoSettingsOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" />
31-
</Link>
3239
<Link href="/factory-profile">
33-
<IoPersonOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" />
40+
<IoPersonOutline className="text-[#F79B72] 2xl:w-7 2xl:h-7 xl:w-7 xl:h-7 lg:w-5 lg:h-5 cursor-pointer hover:text-[#2A4759]" />
3441
</Link>
3542
</div>
3643
<h2 className="text-2xl font-bold mb-2 truncate">Factory Dashboard</h2>
@@ -48,8 +55,8 @@ export default function DashboardPage() {
4855
}
4956
}}
5057
/>
51-
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mb-8">
52-
<div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
58+
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 2xl:mb-8 xl:mb-8 lg:mb-4">
59+
<div className="bg-slate-700 xl:p-6 lg:p-3 p-6 2xl:p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
5360
<p className="text-gray-300">Today’s total CO2 emissions</p>
5461
<p className="text-2xl font-bold mt-2 truncate">
5562
{emissionsLoading
@@ -59,7 +66,7 @@ export default function DashboardPage() {
5966
: "No data"}
6067
</p>
6168
</div>
62-
<div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
69+
<div className="bg-slate-700 xl:p-6 lg:p-3 p-6 2xl:p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
6370
<p className="text-gray-300">This month total CO2 emissions</p>
6471
<p className="text-2xl font-bold mt-2 truncate">
6572
{monthTotal !== null
@@ -69,7 +76,7 @@ export default function DashboardPage() {
6976
: "No data"}
7077
</p>
7178
</div>
72-
<div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
79+
<div className="bg-slate-700 xl:p-6 lg:p-3 p-6 2xl:p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
7380
<p className="text-gray-300">Indirect Emissions</p>
7481
<p className="text-2xl font-bold mt-2 truncate">
7582
{totalCO2 !== null
@@ -81,7 +88,9 @@ export default function DashboardPage() {
8188
</div>
8289
</div>
8390
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
84-
<div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 w-full h-56 sm:h-72 md:h-96">
91+
<div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 w-full
92+
h-56 sm:h-72 2xl:h-126 xl:h-94
93+
lg:h-60 md:h-54">
8594
<h3 className="text-xl font-semibold mb-4 text-white truncate">
8695
CO2 Levels Over Time
8796
</h3>
@@ -104,7 +113,9 @@ export default function DashboardPage() {
104113
</BarChart>
105114
</ResponsiveContainer>
106115
</div>
107-
<div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 w-full h-56 sm:h-72 md:h-96">
116+
<div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 w-full
117+
h-56 sm:h-72 2xl:h-126 xl:h-94
118+
lg:h-60 md:h-54">
108119
<h3 className="text-xl font-semibold mb-4 text-white truncate">
109120
Current CO2 Emissions
110121
</h3>
@@ -126,4 +137,4 @@ export default function DashboardPage() {
126137
</div>
127138
</FactoryLayout>
128139
);
129-
}
140+
}

0 commit comments

Comments
 (0)