Skip to content

Commit

Permalink
Refactor text in ProfileComponent and PieChartComponent
Browse files Browse the repository at this point in the history
  • Loading branch information
@KamogeloMoeketse
KamogeloMoeketse committed Oct 18, 2024
1 parent f853563 commit 2fd3116
Show file tree
Hide file tree
Showing 10 changed files with 116 additions and 90 deletions.
4 changes: 3 additions & 1 deletion frontend/occupi-web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
"chalk": "^5.3.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"core-js": "^3.38.1",
"dom-to-image": "^2.6.0",
"express": "^4.19.2",
"flexsearch": "^0.7.43",
Expand Down Expand Up @@ -113,6 +114,7 @@
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.19",
"daisyui": "^4.12.10",
"esbuild": "^0.24.0",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
Expand All @@ -125,7 +127,7 @@
"react-use-cookie": "^1.6.1",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.5.2",
"vite": "^5.3.2",
"vite": "^5.4.9",
"vite-plugin-mkcert": "^1.17.5"
}
}
2 changes: 1 addition & 1 deletion frontend/occupi-web/src/components/ProfileComponent/ProfileComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const ProfileComponent = ({
break;
case "offsite":
colorClass = "badge-error";
text = "offsite of Office";
text = "Offsite";
break;
case "booked":
colorClass = "badge-warning";
Expand Down
6 changes: 3 additions & 3 deletions frontend/occupi-web/src/components/aiDashboard/aiDashGraphs/BuildingTower.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,12 +207,12 @@ const BuildingTower: React.FC = () => {

return (
<div
style={{ width: "100%", height: "100%", minHeight: "500px" }}
style={{ width: "100%", height: "100%" }}
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
>
<Canvas
camera={{ position: [15, 15, 15], fov: 50 }}
camera={{ position: [15, 15, 15], fov: 50, zoom:2 }}
onCreated={({ gl }) => {
gl.domElement.addEventListener(
"touchstart",
Expand All @@ -233,7 +233,7 @@ const BuildingTower: React.FC = () => {
target={[0, (floorData.length * 1.2) / 2, 0]}
maxPolarAngle={Math.PI / 2}
enableDamping={false}
enableZoom={true}
enableZoom={false}
enablePan={true}
enableRotate={true}
/>
Expand Down
96 changes: 51 additions & 45 deletions frontend/occupi-web/src/components/bookingComponent/BookingComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import { motion } from "framer-motion";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
import { useDisclosure } from "@nextui-org/react";
import { button, useDisclosure } from "@nextui-org/react";

import {
Table,
Expand Down Expand Up @@ -147,20 +147,20 @@ export default function App() {
switch (columnKey) {
case "name":
return (
<User
avatarProps={{
radius: "lg",
src: `https://dev.occupi.tech/api/download-profile-image?email=${user.email}&quality=low`,
}}
description={user.email}
name={cellValue}
>
{user.email}
</User>
<User
avatarProps={{
radius: "lg",
src: `https://dev.occupi.tech/api/download-profile-image?email=${user.email}&quality=low`,
}}
description={user.email}
name={cellValue}
>
{user.email}
</User>
);
case "position":
return (
<div className="flex flex-col">
<div className="flex flex-col">
<p className="text-bold text-small text-text_col capitalize">
{cellValue}
</p>
Expand Down Expand Up @@ -203,35 +203,39 @@ export default function App() {

case "actions":
return (
<div className="relative flex items-center gap-2">
<Tooltip content="View User Details">
<span className="text-lg text-default-400 cursor-pointer active:opacity-50">
{/* <EyeIcon /> */}
<div onClick={onOpen}>{/* <EyeIcon />Hello */}</div>
<OccupancyModal user={user} />
</span>
</Tooltip>
{/* <Tooltip content="Edit user">
<span className="text-lg text-default-400 cursor-pointer active:opacity-50">
<EditIcon />
</span>
</Tooltip> */}
<Tooltip content="Email user">
<span className="text-lg text-default-400 cursor-pointer active:opacity-50">
<a
href={`mailto:${user.email}`}
className="text-lg text-default-400 cursor-pointer active:opacity-50"
>
<FontAwesomeIcon icon={faEnvelope} />
</a>
</span>
</Tooltip>
{/* <Tooltip color="danger" content="Delete user">
<span className="text-lg text-danger cursor-pointer active:opacity-50">
<DeleteIcon />
</span>
</Tooltip> */}
</div>
// <div className="relative gap-2 flex justify-center items-center">
// <Tooltip content="View User Details">
// <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
// {/* <EyeIcon /> */}
// <div onClick={onOpen}>{/* <EyeIcon />Hello */}</div>
// <OccupancyModal user={user} />
// </span>
// </Tooltip>
// {/* <Tooltip content="Edit user">
// <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
// <EditIcon />
// </span>
// </Tooltip> */}
// <Tooltip content="Email user">
// <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
// <a
// href={`mailto:${user.email}`}
// className="text-lg text-default-400 cursor-pointer active:opacity-50"
// >
// <FontAwesomeIcon icon={faEnvelope} />
// </a>
// </span>
// </Tooltip>
// {/* <Tooltip color="danger" content="Delete user">
// <span className="text-lg text-danger cursor-pointer active:opacity-50">
// <DeleteIcon />
// </span>
// </Tooltip> */}
// </div>
<>
<OccupancyModal user={user} />
</>

);
default:
return cellValue;
Expand Down Expand Up @@ -378,8 +382,8 @@ export default function App() {
<Pagination
isCompact
showControls
showShadow
color="primary"
// showShadow
color="default"
page={page}
total={pages}
onChange={setPage}
Expand Down Expand Up @@ -438,7 +442,7 @@ export default function App() {
wrapper: "max-h-[382px]",
}}
selectedKeys={selectedKeys}
selectionMode="multiple"
selectionMode="none"
sortDescriptor={sortDescriptor}
topContent={topContent}
topContentPlacement="outside"
Expand All @@ -458,11 +462,13 @@ export default function App() {
</TableHeader>
<TableBody emptyContent={"No users found"} items={sortedItems}>
{(item) => (
<TableRow key={item.id}>
// <div>
<TableRow key={item.id} >
{(columnKey) => (
<TableCell>{renderCell(item, columnKey)}</TableCell>
)}
</TableRow>
// </div>
)}
</TableBody>
</Table>
Expand Down
18 changes: 15 additions & 3 deletions frontend/occupi-web/src/components/modal/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ export default function OccupancyModal({ user }: OccupancyModalProps) {
{reportData?.peakHours.days.map((day, index) => (
<View key={index} style={styles.tableRow}>
<Text style={styles.tableCell}>{day.weekday}</Text>
<Text style={styles.tableCell}>{day.hours.join(", ")}</Text>
<Text style={styles.tableCell}>{day.hours[0]}:00, {day.hours[1]}:00, {day.hours[2]}:00</Text>
</View>
))}
</View>
Expand All @@ -260,10 +260,14 @@ export default function OccupancyModal({ user }: OccupancyModalProps) {
}
};

const sendEmail = () => {
window.location.href = `mailto:${user.email}`;
};

return (
<>
<div onClick={onOpen}>
<EyeIcon />
<Button onClick={onOpen}><div>View Stats</div></Button>
</div>
<Modal
size="5xl"
Expand Down Expand Up @@ -318,7 +322,7 @@ export default function OccupancyModal({ user }: OccupancyModalProps) {
<AccordionItem
key="2"
aria-label="Work Ratio Chart"
title="Work Ratio Chart"
title="In-Office Rate Chart"
onClick={() => handleToggle("2")}
>
{openItems.includes("2") && (
Expand Down Expand Up @@ -405,6 +409,14 @@ export default function OccupancyModal({ user }: OccupancyModalProps) {
{isDownloading ? "Generating Report..." : "Generate Report"}
</Button>
)}
<Button
className="text-text_col_alt bg-secondary_alt"
isLoading={isDownloading}
onClick={sendEmail}
>
{/* <a className="text-text_col_alt" href={`mailto:${user.email}`} title="Click to email">Email</a> */}
Send Email
</Button>
</ModalFooter>
</>
)}
Expand Down
1 change: 1 addition & 0 deletions frontend/occupi-web/src/components/modal/PieChartComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ interface PieChartComponentProps {
}

const PieChartComponent = ({ data, colors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'] }: PieChartComponentProps) => {
console.log(data);
return (
<PieChart width={400} height={400}>
<Pie data={data} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={100} fill="#82ca9d" label>
Expand Down
19 changes: 13 additions & 6 deletions frontend/occupi-web/src/components/modal/UserWorkRatioChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,23 +39,30 @@ const UserWorkRatioChart = ({ email }: UserWorkRatioChartProps) => {
if (loading) return <div>Loading...</div>;
if (error) return <div className="text-red-500">{error}</div>;

const chartData = userWorkRatioData?.data.map((entry: WorkRatioEntry, index: number) => ({
name: `Entry ${index + 1}`,
value: entry.ratio,
const chartData = userWorkRatioData?.data.map((entry: WorkRatioEntry, index: number) => ({
name: `In office %`,
value: Math.round(entry.ratio * 10)
}));

if (chartData && userWorkRatioData) {
chartData.push({
name: `Out of Office %`,
value: Math.round(100 - userWorkRatioData.data[0].ratio * 10)
});
}

return (
<div className="flex">
<h2>User Work Ratio</h2>
<h2>User In Office Rate</h2>
{chartData && <PieChartComponent data={chartData} />}

<Card className="md:w-1/3">
<CardHeader>
<h1 className="text-xl font-bold">Work Ratio Overview</h1>
<h1 className="text-xl font-bold">In Office Rate Overview</h1>
</CardHeader>
<CardBody>
<p className="text-text_col_secondary_alt">
A work ratio typically represents the proportion of time or
An in-office-rate typically represents the proportion of time or
effort that a user is in office vs Out of Office.It
helps monitor how frequently employees work remotely versus in the office, identifying trends
that may necessitate shifts in policy.
Expand Down
10 changes: 6 additions & 4 deletions ...occupi-web/src/components/occupancyRecommendationEngine/OccupancyRecommendationEngine.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,18 +181,19 @@ const OccupancyRecommendationEngine: React.FC = () => {
};

return (
<div className="p-4 space-y-4 text-text_col_secondary_alt">
<Card>
<div className="space-y-4 text-text_col_secondary_alt w-full">
<Card className="w-full">
<CardHeader>
<h4 className="text-lg font-semibold">
Occupancy Prediction and Recommendations
</h4>
</CardHeader>
<CardBody>
<div className="flex space-x-4 mb-4">
<div className="flex space-x-2 mb-4">
<div>
<label className="block mb-2">Start Date</label>
<DatePicker
<DatePicker
className="w-3/4"
selected={startDate}
onChange={(date: Date | null) => {
if (date) setStartDate(date);
Expand All @@ -205,6 +206,7 @@ const OccupancyRecommendationEngine: React.FC = () => {
<div>
<label className="block mb-2">End Date</label>
<DatePicker
className="w-3/4"
selected={endDate}
onChange={(date: Date | null) => {
if (date) setEndDate(date);
Expand Down
4 changes: 2 additions & 2 deletions frontend/occupi-web/src/components/userStats/UserStatsComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,14 @@ const UserStatsComponent = ({ email }: { email: string }) => {
return (
<div className="font-bold ">
Loading...
<img className=" h-96 w-62" src={AI_loader} alt="" />
<img className=" h-36 w-auto" src={AI_loader} alt="" />
</div>
);
if (error) return <div className="text-text_col_red_salmon">Error: {error}</div>;

return (
<div className="p-4 text-text_col_secondary_alt rounded-lg shadow-md">
<h1 className="text-2xl font-bold mb-4 text-white">Occubot User Statistics</h1>
<h1 className="text-2xl font-bold mb-4">Occubot User Statistics</h1>
{stats && (
<div className="space-y-2 text-white">
<p className="text-text_col_secondary_alt">
Expand Down
Loading

0 comments on commit 2fd3116

Please sign in to comment.