diff --git a/frontend/.gitignore b/frontend/.gitignore index d8f247d6..ef86f6b6 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -25,3 +25,5 @@ dist-ssr #env variables .env + +src/assets/images/ diff --git a/frontend/src/components/ContentHeader/ContentHeader.css b/frontend/src/components/ContentHeader/ContentHeader.css new file mode 100644 index 00000000..abcae832 --- /dev/null +++ b/frontend/src/components/ContentHeader/ContentHeader.css @@ -0,0 +1,71 @@ +.content-header { + position: absolute; + left: 230px; + top: 18%; + display: flex; + width: calc(100% - 395px); + justify-content: space-between; + align-items: center; + padding-bottom: 16px; /* Add padding to create space above border */ + border-bottom: 1px solid #9AB0E1; +} + +.content-header h2 { + font-size: 24px; + font-weight: 600; + color: #1E1E1E; +} + +.button-group { + display: flex; + gap: 12px; /* Space between buttons */ + align-items: center; +} + +.actions-button { + background: white; + color: #4F607E; /* SECONDARY_COLOR */ + border-radius: 20px; /* DEFAULT_BORDER_RADIUS */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + height: 40px; + padding: 0 16px; + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + font-size: 15px; + font-weight: 600; +} + +.actions-button:hover { + background: #f0f5ff; +} + +.add-button { + background: #244B94; /* PRIMARY_BACKGROUND_COLOR */ + color: #F7FAFF; /* PRIMARY_COLOR */ + border-radius: 20px; /* DEFAULT_BORDER_RADIUS */ + width: 120px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + cursor: pointer; + font-size: 15px; + font-weight: 600; +} + +.add-book-button:hover { + opacity: 0.9; +} + +.plus-icon { + width: 18px; + height: 18px; +} + +.down-icon { + width: 18px; + height: 18px; +} \ No newline at end of file diff --git a/frontend/src/components/ContentHeader/ContentHeader.jsx b/frontend/src/components/ContentHeader/ContentHeader.jsx new file mode 100644 index 00000000..d91b0515 --- /dev/null +++ b/frontend/src/components/ContentHeader/ContentHeader.jsx @@ -0,0 +1,40 @@ +import React from "react"; +import { useLocation } from "react-router-dom"; +import { PlusIcon, ChevronDownIcon } from "@heroicons/react/24/outline"; +import "./ContentHeader.css"; + +export default function ContentHeader() { + const location = useLocation(); + const isHistory = location.pathname === "/history"; + + return ( +
+

{isHistory ? "Log History" : "Logbooks"}

+
+ {}} + /> + {}} /> +
+
+ ); +} + +function AddButton({ variant = "logbook", onClick = () => {} }) { + return ( + + ); +} + +function ActionsButton({ onClick = () => {} }) { + return ( + + ); +} diff --git a/frontend/src/components/Navbar/Navbar.jsx b/frontend/src/components/Navbar/Navbar.jsx index dbabf415..c96a0901 100644 --- a/frontend/src/components/Navbar/Navbar.jsx +++ b/frontend/src/components/Navbar/Navbar.jsx @@ -1,6 +1,6 @@ "use state"; -import { useState } from "react"; -import { useNavigate } from "react-router-dom"; +import { useState, useEffect } from "react"; +import { useNavigate, useLocation } from "react-router-dom"; import "./Navbar.css"; import { HomeIcon, @@ -11,10 +11,18 @@ import { import { useAuth } from "../../contexts/AuthContext"; export default function Navbar() { - const [selected, setSelected] = useState("home"); + const location = useLocation(); const { logout } = useAuth(); const navigate = useNavigate(); + // Set initial selected state based on current path + const [selected, setSelected] = useState(() => { + if (location.pathname === "/logbooks") return "logs"; + if (location.pathname === "/home") return "home"; + if (location.pathname === "/history") return "history"; + return ""; + }); + const handleClickLogout = async () => { try { await logout(); @@ -24,10 +32,21 @@ export default function Navbar() { } }; + const handleNavClick = (nav) => { + setSelected(nav); + if (nav === "logs") { + navigate("/logbooks"); + } else if (nav === "home") { + navigate("/home"); + } else if (nav === "history") { + navigate("/history"); + } + }; + return (
- - - +
+
+ + +
+ +
+ ); +} + +export default TopNav; diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 04a4f6da..ea9b54a2 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -7,7 +7,7 @@ import Login from "./pages/login/Login.jsx"; import NotFound from "./pages/not_found/NotFound.jsx"; import Home from "./pages/Homepage.jsx"; import Homepage from "./pages/Homepage.jsx"; -import NewLog from "./pages/NewLog.jsx"; +import Logbooks from "./pages/Logbooks.jsx"; import LogHistory from "./pages/LogHistory.jsx"; import UploadPhotos from "./pages/UploadPhoto.jsx"; import ManualEdit from "./pages/ManualEdit.jsx"; @@ -22,8 +22,8 @@ createRoot(document.getElementById("root")).render( }> } /> } /> - } /> - } /> + } /> + } /> } /> } /> } /> diff --git a/frontend/src/pages/Homepage.jsx b/frontend/src/pages/Homepage.jsx index 26eeed03..793d9743 100644 --- a/frontend/src/pages/Homepage.jsx +++ b/frontend/src/pages/Homepage.jsx @@ -5,20 +5,12 @@ import { CLButtonSecondary, } from "../components/Buttons/CLButtons"; import { useNavigate } from "react-router-dom"; -import { Link } from "react-router-dom"; -import LogbookImage from "../assets/images/logo-small.png"; import LogBooks from "../assets/images/logbooks.png"; import ShopLogBooks from "../assets/images/ShopLogBooks.png"; -import { TextField, InputAdornment } from "@mui/material"; -import { - UserCircleIcon, - BellIcon, - AdjustmentsHorizontalIcon, - MagnifyingGlassIcon, - ChevronRightIcon, - ClockIcon, -} from "@heroicons/react/24/outline"; +import TopNav from "../components/TopNav/TopNav"; +import { ChevronRightIcon, ClockIcon } from "@heroicons/react/24/outline"; import "./styles/Homepage.css"; +import { useAuth } from "../contexts/AuthContext"; export default function Homepage() { return ( @@ -33,6 +25,7 @@ export default function Homepage() { function MainContent() { const navigate = useNavigate(); const [setSelectedLog] = useState(null); + const { session } = useAuth(); const handleCreateNewLog = () => { navigate("/uploadPhotos"); @@ -43,7 +36,7 @@ function MainContent() { }; const handleViewHistory = () => { - navigate("/logHistory"); + navigate("/history"); }; return ( @@ -51,7 +44,9 @@ function MainContent() {

Welcome back, - Chewy! + + {session?.user?.user_metadata?.first_name || "User"} +

@@ -149,41 +144,3 @@ function MainContent() { ); } - -function TopNav() { - const [searchQuery, setSearchQuery] = useState(""); - return ( -
- - FlowLeaflets Logo - - -
- ); -} diff --git a/frontend/src/pages/LogHistory.jsx b/frontend/src/pages/LogHistory.jsx index baba06c1..2442d9d9 100644 --- a/frontend/src/pages/LogHistory.jsx +++ b/frontend/src/pages/LogHistory.jsx @@ -1,165 +1,271 @@ -import { useState } from "react"; +import React, { useState } from "react"; +import { ChevronUpDownIcon } from "@heroicons/react/24/outline"; +import TopNav from "../components/TopNav/TopNav"; import Navbar from "../components/Navbar/Navbar"; -import SearchFilterSort from "../components/LogHistory/SearchFilterSort"; -import LogTable from "../components/LogHistory/LogTable"; -import Pagination from "../components/LogHistory/Pagination"; +import ContentHeader from "../components/ContentHeader/ContentHeader"; import "./styles/LogHistory.css"; -const LogHistory = () => { - const initialLogs = [ +export default function LogHistory() { + const [currentPage, setCurrentPage] = useState(1); + const [logs] = useState([ { id: 1, - title: "Patient A - Weekly Checkup", - dateOfOperation: "2023-09-25", - date: "2023-10-01", - patientName: "Patient A", + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", }, { id: 2, - title: "Patient B - Medication Update", - dateOfOperation: "2024-08-15", - date: "2024-09-20", - patientName: "Patient B", + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", }, { id: 3, - title: "Patient C - Initial Consultation", - dateOfOperation: "2024-06-12", - date: "2024-06-18", - patientName: "Patient C", + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", }, { id: 4, - title: "Patient D - Follow-Up", - dateOfOperation: "2023-12-10", - date: "2023-12-15", - patientName: "Patient D", + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", }, { id: 5, - title: "Patient E - Blood Test Results", - dateOfOperation: "2023-11-18", - date: "2023-11-21", - patientName: "Patient E", + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", }, { id: 6, - title: "Patient F - Surgery Post-Op", - dateOfOperation: "2024-01-05", - date: "2024-01-10", - patientName: "Patient F", + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", }, { id: 7, - title: "Patient G - Annual Checkup", - dateOfOperation: "2024-02-20", - date: "2024-02-28", - patientName: "Patient G", + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", }, { id: 8, - title: "Patient H - Consultation", - dateOfOperation: "2024-03-10", - date: "2024-03-15", - patientName: "Patient H", + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", }, { id: 9, - title: "Patient I - Physical Therapy", - dateOfOperation: "2023-05-01", - date: "2023-05-05", - patientName: "Patient I", + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", }, { id: 10, - title: "Patient J - MRI Results", - dateOfOperation: "2024-03-25", - date: "2024-04-01", - patientName: "Patient J", + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", + }, + { + id: 11, + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", + }, + { + id: 12, + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", + }, + { + id: 13, + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", + }, + { + id: 14, + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", + }, + { + id: 15, + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", + }, + { + id: 16, + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", }, - ]; + { + id: 17, + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", + }, + { + id: 18, + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", + }, + { + id: 19, + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", + }, + { + id: 20, + title: "mylogexample", + type: "TypeExample", + dateCreated: "TypeExample", + }, + ]); + const [selectedLogs, setSelectedLogs] = useState(new Set()); - const [logs] = useState(initialLogs); - const [search, setSearch] = useState(""); - const [filter, setFilter] = useState(""); - const [sort, setSort] = useState(""); - const [currentPage, setCurrentPage] = useState(1); - const logsPerPage = 3; + const logsPerPage = 7; // Number of logs shown per page + const totalPages = Math.ceil(logs.length / logsPerPage); - // New states for Date of Operation and Patient Name filters - const [startDate, setStartDate] = useState(""); - const [endDate, setEndDate] = useState(""); - const [patientName, setPatientName] = useState(""); + // Calculate which logs to display based on current page + const indexOfLastLog = currentPage * logsPerPage; + const indexOfFirstLog = indexOfLastLog - logsPerPage; + const currentLogs = logs.slice(indexOfFirstLog, indexOfLastLog); - // Filter and sort functionality - const filteredLogs = logs - .filter((log) => { - // Title filter - const matchesSearch = log.title - .toLowerCase() - .includes(search.toLowerCase()); - const matchesPatientFilter = filter === "" || log.patientName === filter; + const startRange = (currentPage - 1) * logsPerPage + 1; + const endRange = Math.min(currentPage * logsPerPage, logs.length); - // Date of Operation filter - const matchesDateRange = - (!startDate || new Date(log.dateOfOperation) >= new Date(startDate)) && - (!endDate || new Date(log.dateOfOperation) <= new Date(endDate)); + // Pagination handlers + const handleNextPage = () => { + if (currentPage < totalPages) { + setCurrentPage(currentPage + 1); + } + }; - // Patient Name filter - const matchesPatientName = - !patientName || - log.patientName.toLowerCase().includes(patientName.toLowerCase()); + const handlePreviousPage = () => { + if (currentPage > 1) { + setCurrentPage(currentPage - 1); + } + }; - return ( - matchesSearch && - matchesPatientFilter && - matchesDateRange && - matchesPatientName - ); - }) - .sort((a, b) => { - if (sort === "date") return new Date(b.date) - new Date(a.date); - if (sort === "alphabetical") return a.title.localeCompare(b.title); - return 0; - }); + const handlePageClick = (pageNumber) => { + setCurrentPage(pageNumber); + }; - // Paginate logs - const startIndex = (currentPage - 1) * logsPerPage; - const paginatedLogs = filteredLogs.slice( - startIndex, - startIndex + logsPerPage - ); + // Handle select all checkbox + const handleSelectAll = (event) => { + if (event.target.checked) { + // Select all visible logs + const newSelected = new Set(selectedLogs); + currentLogs.forEach((log) => newSelected.add(log.id)); + setSelectedLogs(newSelected); + } else { + // Deselect all visible logs + const newSelected = new Set(selectedLogs); + currentLogs.forEach((log) => newSelected.delete(log.id)); + setSelectedLogs(newSelected); + } + }; + + // Handle individual checkbox + const handleSelectLog = (logId) => { + const newSelected = new Set(selectedLogs); + if (newSelected.has(logId)) { + newSelected.delete(logId); + } else { + newSelected.add(logId); + } + setSelectedLogs(newSelected); + }; return ( -
+
+ -
-
- - - + +
+ + + + + + + + + + + {currentLogs.map((log) => ( + + + + + + + ))} + +
+ selectedLogs.has(log.id))} + indeterminate={ + currentLogs.some((log) => selectedLogs.has(log.id)) && + !currentLogs.every((log) => selectedLogs.has(log.id)) + } + /> + + LOG TITLE + + TYPE + + DATE CREATED +
+ handleSelectLog(log.id)} + /> + {log.title}{log.type}{log.dateCreated}
+
+
+ Showing {startRange}-{endRange} of{" "} + {logs.length} logs +
+
+ {currentPage > 1 && ( + + Previous + + )} + {[...Array(totalPages)].map((_, index) => ( + handlePageClick(index + 1)} + > + {index + 1} + + ))} + {currentPage < totalPages && ( + + Next + + )} +
); -}; - -export default LogHistory; +} diff --git a/frontend/src/pages/Logbooks.jsx b/frontend/src/pages/Logbooks.jsx new file mode 100644 index 00000000..28c41f82 --- /dev/null +++ b/frontend/src/pages/Logbooks.jsx @@ -0,0 +1,131 @@ +import TopNav from "../components/TopNav/TopNav"; +import Navbar from "../components/Navbar/Navbar"; +import ContentHeader from "../components/ContentHeader/ContentHeader"; +import "./styles/Logbooks.css"; +import { PlusIcon } from "@heroicons/react/24/outline"; +import LogRectangle from "../assets/images/LogRectangle.png"; +import AdultCardiac from "../assets/images/adult-cardiac-book.png"; +import CongenitalCardiac from "../assets/images/congenital-cardiac-book.png"; +import Obstetrics from "../assets/images/obstetrics-book.png"; +import GeneralSurgery from "../assets/images/general-surgery-book.png"; +import Ophthalmology from "../assets/images/ophthalmology-book.png"; + +function LogbookCard({ title, type, storage, created }) { + const getCardClassName = () => { + let className = "logbook-card"; + if (type === "cardiac-congenital") { + className += " congenital"; + } else if (type === "ophthalmology") { + className += " ophthalmology"; + } else if (type === "obstetrics") { + className += " obstetrics"; + } else if (type === "general-surgery") { + className += " general-surgery"; + } + return className; + }; + + const getBookImage = () => { + switch (type) { + case "cardiac-adult": + return AdultCardiac; + case "cardiac-congenital": + return CongenitalCardiac; + case "ophthalmology": + return Ophthalmology; + case "obstetrics": + return Obstetrics; + case "general-surgery": + return GeneralSurgery; + default: + return AdultCardiac; + } + }; + + return ( +
+
+ +
+
+ +
+

{title}

+
+ Type: {type} +
+
+ Storage: {storage}/100 logs + used +
+
+ Created {created} +
+
+
+
+ ); +} + +function Logbooks() { + const logbooks = [ + { + title: "Cardiac Surgery - Nov.", + type: "cardiac-adult", + storage: "20", + created: "10-01-2024", + }, + { + title: "Cardiac Cong. - Nov.", + type: "cardiac-congenital", + storage: "20", + created: "10-01-2024", + }, + { + title: "Ophthalmology - Nov.", + type: "ophthalmology", + storage: "20", + created: "10-01-2024", + }, + { + title: "OB/GYN - Nov.", + type: "obstetrics", + storage: "20", + created: "10-01-2024", + }, + { + title: "General Surgery - Nov.", + type: "general-surgery", + storage: "20", + created: "10-01-2024", + }, + // Add more logbooks as needed + ]; + + return ( +
+ + +
+ +
+ {logbooks.map((book, index) => ( + + ))} +
+ + Add Log Book +
+
+
+
+ ); +} + +export default Logbooks; diff --git a/frontend/src/pages/NewLog.jsx b/frontend/src/pages/NewLog.jsx deleted file mode 100644 index f434b282..00000000 --- a/frontend/src/pages/NewLog.jsx +++ /dev/null @@ -1,42 +0,0 @@ -import { useNavigate } from "react-router-dom"; -import ImageIcon from "@mui/icons-material/Image"; -import ModeIcon from "@mui/icons-material/Mode"; -import Navbar from "../components/Navbar/Navbar"; -import "./styles/NewLog.css"; - -export default function NewLog() { - return ( -
- - -
- ); -} - -function CTASection() { - const navigate = useNavigate(); - - const handleUploadPhoto = () => { - navigate("/uploadPhotos"); - }; - - const handleEnterManually = () => { - navigate("/manualEdit"); - }; - - return ( -
-

How would you like to create a new log?

-
- - -
-
- ); -} diff --git a/frontend/src/pages/styles/Homepage.css b/frontend/src/pages/styles/Homepage.css index d29251d8..b00bbf6d 100644 --- a/frontend/src/pages/styles/Homepage.css +++ b/frontend/src/pages/styles/Homepage.css @@ -8,157 +8,6 @@ body, html { height: 100vh; } -.top-nav { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.8rem 1.5rem; - width: 40px; - height: 40px; -} - -.nav-left { - display: flex; - align-items: center; - gap: 8px; - margin-left: auto; - margin-right: 200px; - margin-left: 50px; - position: relative; - z-index: 1; -} - -.nav-logo { - width: 70px; - height: 70px; -} - -.logo-link { - position: absolute; - top: 0.5rem; - left: 1.5rem; -} - -.nav-right { - display: flex; - align-items: center; - gap: 0.5rem; - margin-right: 1rem; - position: absolute; - top: 2rem; - right: 10%; -} - -/* Style the notification button */ -.notification-btn { - display: flex; - align-items: center; - justify-content: center; - padding: 0.5rem 0.8rem; - border: 1px solid #E5E7EB; - border-radius: 1rem; - cursor: pointer; - transition: all 0.2s ease-in-out; - box-shadow: 0px 0px 10px #e3e8f2; - backdrop-filter: blur(8px); - background: white; - width: 50px; - height: 40px; -} - -/* Style the profile button */ -.profile-btn { - display: flex; - align-items: center; - justify-content: center; - padding: 0.5rem 0.8rem; - border: 1px solid #E5E7EB; - border-radius: 1rem; - color: black; - cursor: pointer; - transition: all 0.2s ease-in-out; - box-shadow: 0px 0px 10px #e3e8f2; - backdrop-filter: blur(8px); - background: white; - width: 50px; - height: 40px; -} - -.notification-btn:hover, -.profile-btn:hover { - background: #E5E7EB; -} - -/* Style the icons */ -.notification-btn svg, -.profile-btn svg { - width: 30px; - height: 18px; -} - -/* Style the filter button */ -.filter-btn { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 0.8rem; - border: 1px solid #E5E7EB; - border-radius: 1rem; - background: white; - color: #2F3C50; - font-size: 14px; - cursor: pointer; - font-weight: 600; - transition: all 0.2s ease-in-out; - box-shadow: 0px 0px 10px #e3e8f2; - backdrop-filter: blur(8px); - height: 40px; -} - -.filter-btn:hover { - background: #F3F4F6; -} - -.MuiTextField-root { - width: 300px !important; - height: 40px !important; - background: #F3F4F6; - border-radius: 50px; - box-shadow: 0px 0px 10px #e3e8f2; - backdrop-filter: blur(8px); -} - -.MuiTextField-root .MuiInputBase-root { - height: 50px !important; - padding: 0 8px !important; - background: white; -} - -.MuiTextField-root .MuiInputBase-input { - padding: 8px 4px !important; - font-size: 13px !important; -} - -.MuiTextField-root .MuiInputAdornment-root { - height: 40px !important; - margin-right: 4px !important; -} - -.MuiTextField-root .MuiInputAdornment-root .icon { - width: 18px !important; - height: 18px !important; - color: #2F3C50; -} - -.filter-btn .icon, -.notification-btn .icon, -.profile-btn .icon, -.search-input .icon { - width: 20px; - height: 20px; - color: #2F3C50; -} - .dashboard-container { padding: 16px; margin-left: 65px; @@ -176,11 +25,13 @@ body, html { .welcome-text { font-weight: 300; font-size: 25px; + color: #1E1E1E; } .user-name { font-weight: bold; font-size: 25px; + color: #1E1E1E; } .content-grid { diff --git a/frontend/src/pages/styles/LogHistory.css b/frontend/src/pages/styles/LogHistory.css index 0cf0e828..e6108b81 100644 --- a/frontend/src/pages/styles/LogHistory.css +++ b/frontend/src/pages/styles/LogHistory.css @@ -1,9 +1,157 @@ -.log-history-container { - display: flex; - flex-direction: column; - align-items: center; - } - -.container { - width: 80%; +.logbooks-container { + padding: 16px; + margin-left: 65px; + max-width: 1400px; +} + +.page-container { + display: flex; + flex-direction: column; + height: 100vh; +} + +.table-container { + background: transparent; + border-radius: 8px; + margin-top: 12%; + margin-left: 6%; + width: 93%; +} + +.logs-table { + width: 100%; + box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); + border-radius: 20px; + border-collapse: collapse; + table-layout: fixed; +} + +.logs-table th { + background: #333A3F; + color: white; + text-align: left; + padding: 13px 24px; + font-weight: 700; + font-size: 17px; + white-space: nowrap; + letter-spacing: 0.5px; +} + +.logs-table th:first-child { + border-top-left-radius: 20px; +} + +.logs-table th:last-child { + border-top-right-radius: 20px; +} + +.logs-table tr.selected { + background-color: #D3E4FF; +} + +.sort-icon { + width: 20px; /* Increased from 16px */ + height: 20px; /* Increased from 16px */ + display: inline-block; + vertical-align: middle; + margin-left: 5px; + stroke-width: 2.5; /* Makes the icon lines thicker */ + margin-bottom: 3px; +} + +.logs-table td { + padding: 8px 24px; + color: #1E1E1E; + font-size: 15px; +} + +.checkbox-column { + width: 64px; +} + +.log-title-column { + width: calc((100% - 64px) / 3); +} + +.type-column { + width: calc((100% - 64px) / 3); +} + +.date-column { + width: calc((100% - 64px) / 3); +} + +.logs-table th:not(.checkbox-column) { + text-align: left; +} + +.logs-table td:not(.checkbox-column) { + text-align: left; + padding: 16px 24px; +} + +.title-column { + color: #64B2F6 !important; +} + +.table-footer { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 16px; + color: #333333; + font-size: 15px; +} + +.table-footer .showing-text span { + color: #64B2F6; /* Light blue for numbers */ + font-size: 15px; +} + +.pagination { + display: flex; + gap: 8px; + align-items: center; +} + +.pagination span { + cursor: pointer; + padding: 4px 8px; + color: #64B2F6; + font-size: 14px; + min-width: 28px; /* Added to ensure circle shape */ + height: 28px; /* Added to ensure circle shape */ + display: flex; /* Added for centering */ + align-items: center; /* Added for centering */ + justify-content: center; /* Added for centering */ +} + +/* Current page styling */ +.pagination .current-page { + background-color: #244B94; + color: white !important; + font-weight: 500; + border-radius: 50%; +} + +.pagination span.next, +.pagination span.previous { + min-width: auto; + height: auto; + color: #244B94; + font-weight: 500; +} + +/* Hover state for non-selected items */ +.pagination span:hover:not(.current-page):not(.next):not(.previous) { + color: #244B94; +} + +tr:nth-child(even) { + background: #F2F5FF; + +} + +tr:hover { + background-color: #F2F5FF; } \ No newline at end of file diff --git a/frontend/src/pages/styles/Logbooks.css b/frontend/src/pages/styles/Logbooks.css new file mode 100644 index 00000000..6ab153d5 --- /dev/null +++ b/frontend/src/pages/styles/Logbooks.css @@ -0,0 +1,186 @@ +body, html { + background: #F7FAFF; + } + + .page-container { + display: flex; + flex-direction: column; + height: 100vh; + } + +.logbooks-container { + padding: 16px; + margin-left: 65px; + max-width: 1400px; +} + +.logbooks-grid { + margin-top: 12%; + height: auto; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 100px 100px; +} + +.logbook-card { + background: #EBF2FD; /* CDD8F0 with full opacity */ + backdrop-filter: blur(20px); + box-shadow: 0px 16px 60px 0px #CDD8F040, /* Outer shadow */ + 0px 0px 60px 0px #FFFFFF80 inset; + transition: transform 0.2s; + cursor: pointer; + border-radius: 30px; + max-width: 300px; + padding: 20px; + height: 300px; /* Increased overall height */ + position: relative; + } + + .logbook-card.congenital { + background: #FBF4FF; +} + +.logbook-card.ophthalmology { + background: #EBFBFE; +} + +.logbook-card.obstetrics { + background: #F0EDF3; +} + +.logbook-card.general-surgery { + background: #E8FDFF; +} + +.logbook-card:hover .book-cover{ + transform: translateY(-12px); +} + +.book-cover { + position: relative; + height: 100%; + overflow: hidden; + transition: transform 0.2s; +} + +.log-rectangle { + width: 180%; + height: 240%; + padding: 13px; + object-fit: cover; + position: absolute; + bottom: 0; + right: -60%; +} + +.book-cover-image { + width: 65%; + margin-top: 10%; + object-fit: cover; + clip-path: inset(0 0 30% 0); +} + +.book-cover-image.obstetrics { + width: 30%; + margin-top: 90%; + object-fit: cover; + clip-path: inset(0 0 30% 0); +} + +.details-container { + position: relative; + height: 140px; +} + +.book-details { + position: relative; + align-items: start; + padding: 10px; + bottom: 70%; + z-index: 2; +} + +.book-title { + font-size: 18px; + font-weight: bold; + color: #1E1E1E; + margin-bottom: 12px; + text-align: left; +} + +.type-label { + font-size: 12px; + color: #333333; + font-weight: 500; + text-align: left; + display: flex; + align-items: center; + gap: 4px; +} + +.type-value { + color: #244B94; + font-weight: 500; + font-size: 12px; +} + +.storage-info { + margin: 8px 0; + font-size: 12px; + font-weight: 500; + text-align: left; + display: flex; + align-items: center; + gap: 4px; +} + +.storage-count { + color: #5D9EFF; + font-weight: 500; + font-size: 12px; +} + +.created-date { + font-size: 10px; + color: #656B6F; + margin-top: 8px; + text-align: left; +} + +.created-date strong { + font-weight: 600; +} + +.add-logbook-card { + border-radius: 30px; + max-width: 300px; + padding: 20px; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + cursor: pointer; + transition: transform 0.2s; +} + +.add-logbook-card:hover { + transform: translateY(-4px); +} + +.plus-circle-icon { + width: 40px; + height: 40px; + color: #2563EB; + padding: 8px; + border: 2px solid #2563EB; + border-radius: 50%; + stroke-width: 3px; +} + +.add-logbook-card span { + color: #1F2937; + font-size: 14px; + font-weight: 400; +} diff --git a/frontend/src/pages/styles/NewLog.css b/frontend/src/pages/styles/NewLog.css deleted file mode 100644 index 828ee3d4..00000000 --- a/frontend/src/pages/styles/NewLog.css +++ /dev/null @@ -1,19 +0,0 @@ -.cta-section { - display: flex; - flex-direction: column; - align-items: center; - margin-left: 64px; - margin-right: 64px; - margin-top: 200px; -} - -.buttons-container { - display: flex; - flex-direction: column; - gap: 10px; -} - -.add-icon { - margin-right: 9px; - vertical-align: -6px; -} \ No newline at end of file