Skip to content

responsive #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hunterachieng merged 2 commits into from
Sep 27, 2025
Merged

responsive #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
62c5aa5
responsive
berissamuyizere Sep 27, 2025
cf64f62
responsive
berissamuyizere Sep 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 4 additions & 13 deletions carbontrack/src/app/compliance_page/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,9 @@ import useFetchCompliance from "../hooks/useFetchCompliance";
import useFetchFactories from "../hooks/useFetchFactories";
import Pagination from "../sharedComponents/Pagination";
import ComplianceTargetModal from "./component/AddTarget";
import { IoPersonOutline, IoSettingsOutline } from "react-icons/io5";
import { updateCompliance } from "../utils/fetchCompliance";
import SidebarLayout from "../components/SideBarLayout";
import Link from "next/link";


interface Factory {
factory_id: number;
Expand Down Expand Up @@ -148,14 +147,6 @@ export default function ComplianceDashboard() {
<div>
<h2 className="text-[2rem] font-bold">Compliance</h2>
</div>
<div className="flex space-x-4 items-center">
<Link href="">
<IoSettingsOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" />
</Link>
<Link href="/ktda-profile">
<IoPersonOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" />
</Link>
</div>
</div>
{message && (
<div
Expand Down Expand Up @@ -205,7 +196,7 @@ export default function ComplianceDashboard() {
<table className="min-w-full text-left border-collapse border border-gray-700 lg:h-[60vh]">
<thead className="bg-[#2A4759] text-white">
<tr>
<th className="p-3 border border-gray-700 w-1/3">Factory</th>
<th className="p-3 border border-gray-700 w-1/3 xl:pb-2">Factory</th>
<th className="p-3 border border-gray-700 w-1/3">
Compliant status
</th>
Expand All @@ -217,7 +208,7 @@ export default function ComplianceDashboard() {
<tbody>
{paginatedData.length === 0 ? (
<tr>
<td colSpan={3} className="p-4 text-center">
<td colSpan={3} className="p-4 text-center ">
No data found
</td>
</tr>
Expand All @@ -238,7 +229,7 @@ export default function ComplianceDashboard() {
>
{item.compliance_status}
</td>
<td className="p-3 border border-gray-700 italic text-gray-400">
<td className="p-3 border border-gray-700 italic text-gray-400 ">
{formatDate(item.updated_at) ||
formatDate(item.created_at)}
</td>
Expand Down
4 changes: 2 additions & 2 deletions carbontrack/src/app/components/EditProfile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,10 +139,10 @@ export default function EditProfilePage() {
setIsSubmitting(false);
}
};

if (loading) return <div className="mt-32 text-center text-white">Loading...</div>;
if (error) return <div className="mt-32 text-center text-red-500">{error}</div>;
if (!profile) return null;
if (loading) return <div className="mt-32 text-center text-white">Loading...</div>;


return (
<main className="min-h-screen bg-gradient-to-br from-gray-900 to-black text-white p-20">
Expand Down
7 changes: 4 additions & 3 deletions carbontrack/src/app/components/SharedProfile/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ import Image from "next/image";
export default function ProfileDisplay() {
const router = useRouter();
const { user: profile, error, loading } = useFetchUsers();

if (error) return <div className="mt-32 text-center text-red-500">{error}</div>;
if (!profile) return null;

if (loading) return <div className="mt-32 text-center text-white">Loading...</div>;
if (error) return <div className="mt-32 text-center text-red-500">{error}</div>;
if (!profile) return null;


const getProfileRoute = () => {
return profile.user_type === "factory" ? "/edit-factory-profile" : "/ktda-edit-profile";
Expand Down
7 changes: 2 additions & 5 deletions carbontrack/src/app/emissions/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,7 @@ export default function EmissionsHeatmapPage() {
return (
<SidebarLayout>
<div className="flex flex-col items-center min-h-[calc(100vh-60px)] p-10">
<div className="flex justify-end w-16 ml-350 space-x-4">
<Link href=""><IoSettingsOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" /></Link>
<Link href="/ktda-profile"><IoPersonOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" /></Link>
</div>

<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>
<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">
<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">
Expand Down Expand Up @@ -114,7 +111,7 @@ export default function EmissionsHeatmapPage() {
{boxes}
</div>
<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">
<div className="relative 2xl:h-[320px] xl:h-[120px] lg:h-[120px] 2xl:ml-20 xl:ml-1 lg:ml-0 ">
<div className="relative 2xl:h-[320px] xl:h-[120px] lg:h-[120px] 2xl:ml-20 xl:ml-10 lg:ml-0 ">
<div
className="rounded-[6px] border border-white block mt-[12px] 2xl:mr-[28px] xl:mr-[2px] lg:mr-[0px]"
style={{
Expand Down
39 changes: 25 additions & 14 deletions carbontrack/src/app/factory-dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
"use client";
import React from "react";
import "react-datepicker/dist/react-datepicker.css";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid,Tooltip, LineChart, Line, ResponsiveContainer,} from "recharts";
import { IoSettingsOutline, IoPersonOutline } from "react-icons/io5";
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
LineChart,
Line,
ResponsiveContainer,
} from "recharts";
import { IoPersonOutline } from "react-icons/io5";
import { useFetchEmission } from "../hooks/useFetchEmissions";
import { useFetchEnergyEntries } from "../hooks/useFetchEnergyEntries";
import Link from "next/link";
Expand All @@ -24,13 +34,10 @@ export default function DashboardPage() {
<FactoryLayout>
<div className="bg-black text-white w-full min-h-screen flex flex-col">
<MqttSubscriber />
<main className="flex-1 p-4 md:p-8 overflow-auto w-full max-w-7xl mx-auto">
<main className="flex-1 p-4 md:p-8 overflow-auto w-full max-w-9xl mx-auto">
<div className="flex justify-end space-x-4 mb-4">
<Link href="">
<IoSettingsOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" />
</Link>
<Link href="/factory-profile">
<IoPersonOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" />
<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]" />
</Link>
</div>
<h2 className="text-2xl font-bold mb-2 truncate">Factory Dashboard</h2>
Expand All @@ -48,8 +55,8 @@ export default function DashboardPage() {
}
}}
/>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mb-8">
<div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<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">
<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">
<p className="text-gray-300">Today’s total CO2 emissions</p>
<p className="text-2xl font-bold mt-2 truncate">
{emissionsLoading
Expand All @@ -59,7 +66,7 @@ export default function DashboardPage() {
: "No data"}
</p>
</div>
<div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<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">
<p className="text-gray-300">This month total CO2 emissions</p>
<p className="text-2xl font-bold mt-2 truncate">
{monthTotal !== null
Expand All @@ -69,7 +76,7 @@ export default function DashboardPage() {
: "No data"}
</p>
</div>
<div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<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">
<p className="text-gray-300">Indirect Emissions</p>
<p className="text-2xl font-bold mt-2 truncate">
{totalCO2 !== null
Expand All @@ -81,7 +88,9 @@ export default function DashboardPage() {
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<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">
<div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 w-full
h-56 sm:h-72 2xl:h-126 xl:h-94
lg:h-60 md:h-54">
<h3 className="text-xl font-semibold mb-4 text-white truncate">
CO2 Levels Over Time
</h3>
Expand All @@ -104,7 +113,9 @@ export default function DashboardPage() {
</BarChart>
</ResponsiveContainer>
</div>
<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">
<div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 w-full
h-56 sm:h-72 2xl:h-126 xl:h-94
lg:h-60 md:h-54">
<h3 className="text-xl font-semibold mb-4 text-white truncate">
Current CO2 Emissions
</h3>
Expand All @@ -126,4 +137,4 @@ export default function DashboardPage() {
</div>
</FactoryLayout>
);
}
}
Loading