Main components added

ubclaunchpad · Dec 4, 2024 · 545c5f2 · 545c5f2
1 parent c8ce8b9
commit 545c5f2
Show file tree

Hide file tree

Showing 18 changed files with 536 additions and 500 deletions.
diff --git a/frontend/src/components/Home/Header/WelcomeSection.css b/frontend/src/components/Home/Header/WelcomeSection.css
@@ -0,0 +1,19 @@
+.welcome-section {
+  position: absolute;
+  left: 230px;
+  top: 12%;
+  display: flex;
+  align-items: center;
+}
+
+.welcome-text {
+  font-weight: 300;
+  font-size: 25px;
+  color: #1e1e1e;
+}
+
+.user-name {
+  font-weight: bold;
+  font-size: 25px;
+  color: #1e1e1e;
+}
diff --git a/frontend/src/components/Home/Header/WelcomeSection.jsx b/frontend/src/components/Home/Header/WelcomeSection.jsx
@@ -0,0 +1,12 @@
+import "./WelcomeSection.css";
+
+export default function WelcomeSection({ firstName }) {
+  return (
+    <div className="welcome-section">
+      <h1>
+        <span className="welcome-text">Welcome back, </span>
+        <span className="user-name">{firstName}</span>
+      </h1>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Home/LeftSection/BottomSection.css b/frontend/src/components/Home/LeftSection/BottomSection.css
@@ -0,0 +1,8 @@
+.bottom-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 30px;
+  margin-top: 30px;
+  width: 95%;
+  height: calc(500px - 280px - 24px);
+}
diff --git a/frontend/src/components/Home/LeftSection/BottomSection.jsx b/frontend/src/components/Home/LeftSection/BottomSection.jsx
@@ -0,0 +1,12 @@
+import ShopBooksCard from "./ShopBooksCard";
+import RecentActivityCard from "./RecentActivityCard";
+import "./BottomSection.css";
+
+export default function BottomSection({ recentActivities }) {
+  return (
+    <div className="bottom-section">
+      <ShopBooksCard />
+      <RecentActivityCard recentActivities={recentActivities} />
+    </div>
+  );
+}
diff --git a/frontend/src/components/Home/LeftSection/GetStartedCard.css b/frontend/src/components/Home/LeftSection/GetStartedCard.css
@@ -0,0 +1,31 @@
+.get-started-card {
+  background: white;
+  border-radius: 30px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  width: 85%;
+  padding: 20px 30px;
+  height: 50%;
+}
+
+.get-started-card h2 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-top: 0;
+  color: #2f3c50;
+}
+
+.get-started-card p {
+  color: #3c4049;
+  font-weight: 400;
+  text-align: left;
+  font-size: 14px;
+  margin-bottom: 16px;
+}
+
+.button-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  height: 55%;
+}
diff --git a/frontend/src/components/Home/LeftSection/GetStartedCard.jsx b/frontend/src/components/Home/LeftSection/GetStartedCard.jsx
@@ -0,0 +1,27 @@
+import { CLButtonSecondary } from "../../Buttons/CLButtons";
+import { NewLogModal } from "../../NewLogModal/NewLogModal";
+import "./GetStartedCard.css";
+
+export default function GetStartedCard({
+  handleAddLogbook,
+  handleViewHistory,
+}) {
+  return (
+    <div className="get-started-card">
+      <h2>Get Started</h2>
+      <p>
+        Convert handwritten clinical logs to standardized excel templates with
+        just a click of a button!
+      </p>
+      <div className="button-stack">
+        <NewLogModal />
+        <CLButtonSecondary onClick={handleAddLogbook} width={"230px"}>
+          Add Logbook
+        </CLButtonSecondary>
+        <CLButtonSecondary onClick={handleViewHistory} width={"230px"}>
+          View Log History
+        </CLButtonSecondary>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Home/LeftSection/MainContent.css b/frontend/src/components/Home/LeftSection/MainContent.css
@@ -0,0 +1,13 @@
+.dashboard-container {
+  padding: 16px;
+  margin-left: 65px;
+  max-width: 1400px;
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 24px;
+  margin-top: 5%;
+  height: auto;
+}
diff --git a/frontend/src/components/Home/LeftSection/MainContent.jsx b/frontend/src/components/Home/LeftSection/MainContent.jsx
@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../../../contexts/AuthContext";
+import WelcomeSection from "../Header/WelcomeSection";
+import GetStartedCard from "./GetStartedCard";
+import BottomSection from "./BottomSection";
+import LogbooksCard from "../RightSection/LogbooksCard";
+import "./MainContent.css";
+
+export default function MainContent() {
+  const navigate = useNavigate();
+  const [setSelectedLog] = useState(null);
+  const { session } = useAuth();
+
+  const handleAddLogbook = () => {
+    navigate("/newLog");
+  };
+
+  const handleViewHistory = () => {
+    navigate("/history");
+  };
+
+  const recentActivities = [
+    {
+      id: 1,
+      action: "Added Log",
+      logName: "mylogexample",
+      time: "1d",
+    },
+    {
+      id: 2,
+      action: "Added Log",
+      logName: "mylogexample",
+      time: "1d",
+    },
+    {
+      id: 3,
+      action: "Added Log",
+      logName: "mylogexample",
+      time: "1d",
+    },
+    // Add more items as needed
+  ];
+
+  const progressItems = [
+    {
+      id: 1,
+      name: "Adult Cardiac 2025",
+      progress: 65,
+    },
+    {
+      id: 2,
+      name: "Adult Cardiac 2025",
+      progress: 65,
+    },
+    {
+      id: 3,
+      name: "Adult Cardiac 2025",
+      progress: 65,
+    },
+    // Add more items as needed
+  ];
+
+  return (
+    <div className="dashboard-container">
+      <WelcomeSection
+        firstName={session?.user?.user_metadata?.first_name || "User"}
+      />
+
+      <div className="content-grid">
+        <div>
+          <GetStartedCard
+            handleAddLogbook={handleAddLogbook}
+            handleViewHistory={handleViewHistory}
+          />
+
+          <BottomSection recentActivities={recentActivities} />
+        </div>
+
+        <LogbooksCard
+          progressItems={progressItems}
+          setSelectedLog={setSelectedLog}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Home/LeftSection/RecentActivityCard.css b/frontend/src/components/Home/LeftSection/RecentActivityCard.css
@@ -0,0 +1,84 @@
+.recent-activity-card {
+  background: white;
+  border-radius: 30px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  padding: 20px;
+  height: 83%;
+  max-height: 300px;
+  overflow-y: auto;
+  transition: transform 0.2s ease;
+}
+
+.recent-activity-card:hover {
+  transform: translateY(-2px);
+}
+
+.activity-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.activity-header h3 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-top: 0;
+  color: #2f3c50;
+}
+
+.activity-header .chevron-icon {
+  width: 20px;
+  height: 20px;
+  color: black;
+  margin-top: -20px;
+}
+
+.activity-list {
+  display: flex;
+  flex-direction: column;
+  margin-top: -10px;
+}
+
+.activity-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.activity-info {
+  display: flex;
+  gap: 5px;
+  color: #666;
+  font-size: 12px;
+}
+
+.activity-info h2 {
+  font-weight: 500;
+  font-size: 12px;
+  color: #2f3c50;
+  opacity: 0.8;
+}
+
+.activity-info h3 {
+  font-weight: 700;
+  font-size: 12px;
+  color: #2e4a8f;
+  margin-top: 10px;
+}
+
+.activity-time {
+  margin-left: 20px;
+}
+
+.activity-time h3 {
+  font-weight: 400;
+  font-size: 12px;
+  color: #a1b4de;
+}
+
+.time-icon {
+  color: #92a4cb;
+  width: 14px;
+  height: 14px;
+}
diff --git a/frontend/src/components/Home/LeftSection/RecentActivityCard.jsx b/frontend/src/components/Home/LeftSection/RecentActivityCard.jsx
@@ -0,0 +1,29 @@
+import { ChevronRightIcon, ClockIcon } from "@heroicons/react/24/outline";
+import "./RecentActivityCard.css";
+
+export default function RecentActivityCard({ recentActivities }) {
+  return (
+    <a href="/recent-activity" className="recent-activity-link">
+      <div className="recent-activity-card">
+        <div className="activity-header">
+          <h3>Recent Activity</h3>
+          <ChevronRightIcon className="chevron-icon" />
+        </div>
+        <div className="activity-list">
+          {recentActivities.map((activity) => (
+            <div key={activity.id} className="activity-item">
+              <div className="activity-info">
+                <h2>{activity.action}:</h2>
+                <h3 className="log-name">{activity.logName}</h3>
+              </div>
+              <div className="activity-time">
+                <h3>{activity.time}</h3>
+              </div>
+              <ClockIcon className="time-icon" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </a>
+  );
+}
diff --git a/frontend/src/components/Home/LeftSection/ShopBooksCard.css b/frontend/src/components/Home/LeftSection/ShopBooksCard.css
@@ -0,0 +1,58 @@
+.shop-books-card {
+  background: linear-gradient(232.43deg, #6c8bd3 9.4%, #244b94 90.17%);
+  border-radius: 30px;
+  padding: 20px;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  height: 83%;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.2s ease;
+}
+
+.shop-books-card:hover {
+  transform: translateY(-2px);
+}
+
+.shop-books-card::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(
+    circle at bottom,
+    rgba(255, 255, 255, 0) 30%,
+    rgba(255, 255, 255, 0.2) 100%
+  );
+  pointer-events: none;
+}
+
+.shop-books-card h3 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-top: 0;
+  color: white;
+}
+
+.shop-books-card .chevron-icon {
+  width: 20px;
+  height: 20px;
+  color: white;
+  margin-top: 4px;
+}
+
+.shop-books-image {
+  position: absolute;
+  top: 43%;
+  left: 1px;
+  right: 1px;
+  width: 250px;
+  height: auto;
+  object-fit: contain;
+  z-index: 1;
+}
+