From 7beb78aeb732a1153f4ea8e3851fe4471aacb126 Mon Sep 17 00:00:00 2001 From: Tinashe-Austin Date: Sun, 20 Oct 2024 21:35:58 +0200 Subject: [PATCH 1/5] Refactor styles in AiDashCard and GraphContainer components --- .../aiDashboard/aiDashCard/AiDashCard.tsx | 14 +++++++------- .../components/graphContainer/GraphContainer.tsx | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/occupi-web/src/components/aiDashboard/aiDashCard/AiDashCard.tsx b/frontend/occupi-web/src/components/aiDashboard/aiDashCard/AiDashCard.tsx index c045db38..ecc6c5db 100644 --- a/frontend/occupi-web/src/components/aiDashboard/aiDashCard/AiDashCard.tsx +++ b/frontend/occupi-web/src/components/aiDashboard/aiDashCard/AiDashCard.tsx @@ -27,13 +27,13 @@ const AiDashCard: React.FC = ({ }) => { return (
-
+
{icon}

@@ -43,13 +43,13 @@ const AiDashCard: React.FC = ({

= ({

= ({ width = '24.531vw', height = '13.49vw' ,mainComponent}) => { return (

-
{mainComponent} +
{mainComponent}
); From 26d34db7a5366fc4a9756f05b3127123e5d90e39 Mon Sep 17 00:00:00 2001 From: Tinashe-Austin Date: Sun, 20 Oct 2024 22:25:55 +0200 Subject: [PATCH 2/5] Refactor styles in AiDashCard component Refactor styles in GraphContainer component --- .../aiDashboard/aiDashCard/AiDashCard.tsx | 10 +++++----- .../src/pages/aiDashboard/AiDashboard.tsx | 16 ++++++++-------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/frontend/occupi-web/src/components/aiDashboard/aiDashCard/AiDashCard.tsx b/frontend/occupi-web/src/components/aiDashboard/aiDashCard/AiDashCard.tsx index ecc6c5db..033a6ef0 100644 --- a/frontend/occupi-web/src/components/aiDashboard/aiDashCard/AiDashCard.tsx +++ b/frontend/occupi-web/src/components/aiDashboard/aiDashCard/AiDashCard.tsx @@ -27,13 +27,13 @@ const AiDashCard: React.FC = ({ }) => { return (
-
+
{icon}

@@ -43,13 +43,13 @@ const AiDashCard: React.FC = ({

{ { id: "card1", title: "Office Occupancy", - icon: , + icon: , stat: workRatio ? `${(workRatio * 10).toFixed(2)}%` : "Loading...", trend: 3.46, }, { id: "card2", title: "Available Space", - icon: , + icon: , stat: totalMaxCapacity && totalBookings ? `${totalBookings}/${totalMaxCapacity}` : "Loading...", trend: -2.1, @@ -150,14 +150,14 @@ const AiDashboard: React.FC = () => { { id: "card3", title: "Bookings", - icon: , + icon: , stat: currentBookings !== null ? `${currentBookings}` : "Loading...", trend: 8.7, }, { id: "card4", title: "Check-ins Today", - icon: , + icon: , stat: `${counter}`, trend: 3.4, }, @@ -340,21 +340,21 @@ const AiDashboard: React.FC = () => {

) )} -
+
-
+
From c653135e247e3816ab506b155634b175d6bcdb3b Mon Sep 17 00:00:00 2001 From: Tinashe-Austin Date: Sun, 20 Oct 2024 22:30:46 +0200 Subject: [PATCH 3/5] Refactor styles in Rooms component --- frontend/occupi-web/src/pages/rooms/Rooms.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/occupi-web/src/pages/rooms/Rooms.tsx b/frontend/occupi-web/src/pages/rooms/Rooms.tsx index ce815b35..5bbc74e6 100644 --- a/frontend/occupi-web/src/pages/rooms/Rooms.tsx +++ b/frontend/occupi-web/src/pages/rooms/Rooms.tsx @@ -281,7 +281,7 @@ const Rooms: React.FC = () => { whileTap={{ scale: 0.98 }} className="mb-4 relative" > - + {room.isDisabled && ( Disabled From aaa736339bdacae391254e7440a517ff0e406d15 Mon Sep 17 00:00:00 2001 From: Tinashe-Austin Date: Sun, 20 Oct 2024 22:42:35 +0200 Subject: [PATCH 4/5] Refactor styles in pdf report --- .../src/pages/reports/PDFReport.tsx | 207 +++++++----------- 1 file changed, 84 insertions(+), 123 deletions(-) diff --git a/frontend/occupi-web/src/pages/reports/PDFReport.tsx b/frontend/occupi-web/src/pages/reports/PDFReport.tsx index 40d0706f..c51cd487 100644 --- a/frontend/occupi-web/src/pages/reports/PDFReport.tsx +++ b/frontend/occupi-web/src/pages/reports/PDFReport.tsx @@ -12,7 +12,6 @@ import { TopNav } from "@components/index"; import { occupiLogo } from "@assets/index"; import axios from "axios"; -// Define the interface for the data interface CapacityData { date: string; day: string; @@ -32,7 +31,6 @@ interface ResponseItem { Special_Event: number; } -// Sample data const occupancyData = [ { month: "January", occupancy: 60 }, { month: "February", occupancy: 70 }, @@ -48,7 +46,6 @@ const occupancyData = [ { month: "December", occupancy: 80 }, ]; -// Create styles const styles = StyleSheet.create({ page: { flexDirection: "column", @@ -71,8 +68,18 @@ const styles = StyleSheet.create({ textAlign: "right", textTransform: "uppercase", }, + sectionTitle: { + fontSize: 16, + fontWeight: "bold", + marginBottom: 10, + color: "#333333", + paddingBottom: 5, + borderBottom: "1 solid #CCCCCC", + }, section: { - marginVertical: 10, + marginVertical: 15, + padding: 10, + backgroundColor: "#FAFAFA", }, paragraph: { marginVertical: 10, @@ -112,28 +119,27 @@ const styles = StyleSheet.create({ textAlign: "center", color: "grey", }, - chartContainer: { - marginVertical: 20, - width: "100%", - height: 200, - backgroundColor: "#E5E5E5", - justifyContent: "center", - alignItems: "center", - textAlign: "center", + bulletPoint: { + marginLeft: 10, + fontSize: 12, }, }); -// summary data const summaryText = `This report provides an in-depth analysis of the office occupancy trends over highlighting key areas for improvement and optimization based on AI-driven predictions.`; + function BasicDocument() { -// Mock additional data for the report -const [additionalData, setAdditionalData] = useState([ - { category: "Total Floors", value: 0 }, - { category: "Total Meeting Rooms", value: 0 }, - { category: "Average Desk Utilization", value: "0%" }, -]); + const [searchQuery, setSearchQuery] = useState(""); + const [capacityData, setCapacityData] = useState([]); + const [, setLoading] = useState(true); + const [, setError] = useState(null); + const [selectedMonths, setSelectedMonths] = useState([]); + const [additionalData, setAdditionalData] = useState([ + { category: "Total Floors", value: 0 }, + { category: "Total Meeting Rooms", value: 0 }, + { category: "Average Desk Utilization", value: "0%" }, + ]); -useEffect(() => { + useEffect(() => { const fetchData = async () => { try { const [roomsResponse, bookingsResponse] = await Promise.all([ @@ -148,18 +154,10 @@ useEffect(() => { const roomsData = roomsResponse.data.data; const bookingsData = bookingsResponse.data.data; - if (!Array.isArray(roomsData) || !Array.isArray(bookingsData)) { - throw new Error("Data is not in the expected format"); - } - - // Calculate total floors - const totalFloors = new Set(roomsData.map(room => room.floorNo)).size; - - // Calculate total meeting rooms + const totalFloors = new Set(roomsData.map((room: { floorNo: any; }) => room.floorNo)).size; const totalMeetingRooms = roomsData.length; - - const totalOccupancy = bookingsData.reduce((sum, booking) => sum + booking.count, 0); - const totalCapacity = roomsData.reduce((sum, room) => sum + (room.maxOccupancy || 0), 0); + const totalOccupancy = bookingsData.reduce((sum: any, booking: { count: any; }) => sum + booking.count, 0); + const totalCapacity = roomsData.reduce((sum: any, room: { maxOccupancy: any; }) => sum + (room.maxOccupancy || 0), 0); const averageUtilization = totalCapacity > 0 ? (totalOccupancy / totalCapacity) * 100 : 0; setAdditionalData([ @@ -176,26 +174,10 @@ useEffect(() => { fetchData(); }, []); -// Create Document Component - - const [searchQuery, setSearchQuery] = useState(""); - const [capacityData, setCapacityData] = useState([]); - const [, setLoading] = useState(true); - const [, setError] = useState(null); - const [selectedMonths, setSelectedMonths] = useState([]); - - const handleInputChange = (e: { - target: { value: React.SetStateAction }; - }) => { - setSearchQuery(e.target.value); - }; - useEffect(() => { - const fetchData = async () => { + const fetchCapacityData = async () => { try { - const response = await axios.get( - "https://ai.occupi.tech/predict_week" - ); + const response = await axios.get("https://ai.occupi.tech/predict_week"); const formattedData = response.data.map((item: ResponseItem) => ({ date: item.Date, day: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][item.Day_of_Week], @@ -211,18 +193,20 @@ useEffect(() => { } }; - fetchData(); + fetchCapacityData(); }, []); + const handleInputChange = (e: { target: { value: React.SetStateAction }}) => { + setSearchQuery(e.target.value); + }; + const handleMonthSelection = (month: string) => { - setSelectedMonths((prevMonths) => - prevMonths.includes(month) - ? prevMonths.filter((m) => m !== month) - : [...prevMonths, month] + setSelectedMonths(prev => + prev.includes(month) ? prev.filter(m => m !== month) : [...prev, month] ); }; - const filteredOccupancyData = occupancyData.filter((data) => + const filteredOccupancyData = occupancyData.filter(data => selectedMonths.includes(data.month) ); @@ -232,7 +216,7 @@ useEffect(() => { mainComponent={
Reports - + Generate and download reports for Analysis
@@ -241,7 +225,6 @@ useEffect(() => { onChange={handleInputChange} /> - {/* Month Filter */}
{occupancyData.map((data) => (