layout optimisation and adjustments

.gitignore

@@ -26,3 +26,4 @@ next-cart-app.zip
 certificates
 content/output/*
 baseUrl.txt
+public/content/output/*

.vscode/settings.json

@@ -119,5 +119,8 @@
   },
   "[javascriptreact]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[handlebars]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
   }
 }

components/layout.tsx

@@ -51,12 +51,12 @@ export default function Layout({ children }: { children: ReactNode }) {
         <div className="flex flex-row h-[90vh]  w-screen  ">
           <ToastContainer position="top-center" style={{ zIndex: 9999 }} />
           <Sidebar isSidebarOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
-          <main className={`pr-10 transition-all h-[90vh]  duration-300 ${isSidebarOpen ? 'ml-64 w-[calc(100%-16rem)] ' : 'ml-0 w-[calc(100%)] '}`}>
+          <main className={`w-full pr-10 transition-all h-[90vh] duration-300 ${isSidebarOpen ? 'ml-60 ' : 'ml-6'}`}>
             {children}
           </main>
         </div>
         {/* <div className="justify-end items-center text-center ">
-          <Footer />
+          <Footer /> 
         </div> */}
       </div>
     </div>

components/sidebar.tsx

@@ -17,7 +17,7 @@ function SidebarMenuItem({ item, session, isSubmenu }) {
   //const [isOpen, setIsOpen] = useState(false && collapsable);
   // Initialize isOpen to true for non-collapsible items, ensuring they are always "open" // xOR
 
-  const baseClass = `sidemenu-item flex items-center ${isSubmenu ? "px-4 py-1" : ""} mt-1 transition-colors duration-3000 transform rounded-md`;
+  const baseClass = `sidemenu-item flex items-center ${isSubmenu ? "px-3 py-1" : ""} mt-1 pr-0 transition-colors duration-3000 transform rounded-md`;
   const activeClass = isActive ? "sidemenu-item-active text-blue-600 bg-gray-100 dark:text-blue-400 dark:bg-blue-900" : "text-gray-700 dark:text-gray-300";
   const hoverClasses = "hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200 hover:text-gray-700";
 
@@ -64,7 +64,7 @@ function SidebarMenuItem({ item, session, isSubmenu }) {
         {item.svgData && <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d={item.svgData} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
         </svg>}
-        <span className="mx-4 font-medium">{item.text}</span>
+        <span className="ml-3 mr-1 font-medium">{item.text}</span>
         {item.children && <DropDownIcon isOpen={isOpen} />}
       </div>
       {isOpen && item.children && (
@@ -89,7 +89,7 @@ function DropDownIcon({ isOpen }) {
 
 export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
   const { data: session, status } = useSession();
-  const sidebarWidth = 256; // Simplify by using a constant
+  const sidebarWidth = 226; // Simplify by using a constant
   const sidebarRef = useRef(null);
   //const [locations, setLocations] = useState([]);
 
@@ -126,7 +126,7 @@ export default function Sidebar({ isSidebarOpen, toggleSidebar }) {
   return (
     <>
       <button onClick={toggleSidebar}
-        className="fixed top-0 left-0 z-40 m-4 text-xl bg-white border border-gray-200 p-2 rounded-full shadow-lg focus:outline-none"
+        className="fixed top-1 left-4 z-40 m- text-xl bg-white border border-gray-200 p-2 rounded-full shadow-lg focus:outline-none"
         style={{ transform: isSidebarOpen ? `translateX(${sidebarWidth - 64}px)` : 'translateX(-20px)' }}>☰</button>
       <aside id="sidenav" ref={sidebarRef}
         className="px-2 fixed top-0 left-0 z-30 h-screen overflow-y-auto bg-white border-r dark:bg-gray-900 dark:border-gray-700 transition-all duration-300 w-64"
@@ -163,7 +163,7 @@ function UserSection({ session }) {
 
 function SignInButton() {
   return (
-    <div className="items-center py-6" onClick={() => signIn()}>
+    <div className="items-center py-4" onClick={() => signIn()}>
       <a href="/api/auth/signin">Впишете се</a>
     </div>
   );
@@ -173,13 +173,13 @@ function UserDetails({ session }) {
   return (
     <>
       <hr className="m-0" />
-      <div className="flex items-center py-4 -mx-2">
+      <div className="flex items-center">
         {session.user.image && (
           <img className="object-cover mx-2 rounded-full h-9 w-9" src={session.user.image} alt="avatar" />
         )}
         <div className="ml-3 overflow-hidden">
-          <p className="mx-2 mt-2 text-sm font-medium text-gray-800 dark:text-gray-200">{session.user.name}</p>
+          <p className="mx-1 mt-1 text-sm font-medium text-gray-800 dark:text-gray-200">{session.user.name}</p>
-          <p className="mx-2 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400">{session.user.role}</p>
+          <p className="mx-1 mt-1 text-sm font-medium text-gray-600 dark:text-gray-400">{session.user.role}</p>
           <a href="/api/auth/signout" className={styles.button} onClick={(e) => { e.preventDefault(); signOut(); }}>Излезте</a>
         </div>
       </div>
@@ -198,7 +198,7 @@ function FooterSection() {
     footerMenu.map((item, index) => (
       <div
         key={index}
-        className="px-4 py-2 mt-2 cursor-pointer hover:underline hover:text-blue-600 dark:hover:text-blue-400 "
+        className="px-4 py-1 mt-2 cursor-pointer hover:underline hover:text-blue-600 dark:hover:text-blue-400 "
         onClick={() => navigateTo(item.url)}
       >
         <span className="text-gray-700 dark:text-gray-300 font-medium">{item.text}</span>

pages/api/schedule.ts

@@ -169,7 +169,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
             fs.writeFileSync(path.join(outputPath, `shifts ${year}.${month}.json`), JSON.stringify(monthlySchedule), 'utf8');
             // Load the Handlebars template from a file
-            const template = fs.readFileSync("./src/templates/word.html", "utf8");
+            const template = fs.readFileSync("./src/templates/schedule.hbs", "utf8");
             generateTemplateFile(monthlySchedule, template).then((result) => {
                 const filename = path.join(outputPath, `schedule ${year}.${month}.html`)
                 //fs.writeFileSync(filename, result, "utf8");

server.js

@@ -62,10 +62,6 @@ const uploadTmp = multer({ storage: storageMem });
 
 const prisma = common.getPrismaClient();
 
-
-// krasi test
-
-
 // handlers
 app
   .prepare()

src/templates/schedule.hbs

@@ -0,0 +1,136 @@
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Event Schedule</title>
+    <style>
+        /* template */
+        /* Word-specific styles */
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            border: none;
+            margin-top: 20px;
+            font-family: Arial, Helvetica, sans-serif;
+        }
+
+        th {
+            font-weight: bold;
+            text-align: center;
+            border: 1px solid black;
+            padding: 4px;
+            margin-top: 6px;
+            margin-bottom: 6px;
+            font-size: 12.5pt;
+        }
+
+        td {
+            border: 1px solid black;
+            padding: 2px;
+            margin-top: 2px;
+            margin-bottom: 2px;
+            padding-left: 8px;
+            padding-right: 8px;
+            font-size: 12.5pt;
+        }
+
+
+        /* Word-specific styles */
+        @media screen and (min-width: 0\0) {
+            table {
+                width: auto !important;
+            }
+
+            table td,
+            table th {
+                border: 1px solid #000000 !important;
+            }
+
+        }
+
+        /* custom styles */
+        .col1 {
+            text-align: center;
+            width: 15%;
+        }
+
+        .col2 {
+            width: 60%;
+        }
+
+        /* Define different header colors for each week */
+        .week1 {
+            background-color: #FFF766;
+        }
+
+        .week2 {
+            background-color: #B4C6E7;
+        }
+
+        .week3 {
+            background-color: #ED7D31;
+        }
+
+        .week4 {
+            background-color: #BFBFBF;
+        }
+
+        .week5 {
+            background-color: #C785C8;
+        }
+    </style>
+</head>
+
+<body>
+    {{#each events}}
+    {{!-- <div class="block md:hidden">
+        <!-- Iterate over your data, creating a card for each row -->
+        <div class="p-4 bg-white shadow rounded-lg mb-3">
+            <div class="week{{week}}"><strong>{{dayOfWeek}} {{dayOfMonth}}:</strong> {{placeOfEvent}}</div>
+            {{#each shifts}}
+
+            <div><strong>{{time}}:</strong>{{names}} </div>
+            <div>{{notes}}<strong>{{notes_bold}}</strong></div>
+
+            {{/each}}
+        </div>
+        {{#each shifts}}
+        <tr>
+            <td class="col1">{{time}}</td>
+            <td class="col2">{{names}}</td>
+            <td class="col3 md:table-cell">{{notes}}<strong>{{notes_bold}}</strong></td>
+        </tr>
+        {{/each}}
+    </div> --}}
+    <div style="page-break-before: always;"
+        class="hidden md:block"></div>
+    <table>
+        <thead class="week{{week}}">
+            <tr>
+                <th colspan="3">{{dayOfWeek}} {{dayOfMonth}}<br />
+                    {{placeOfEvent}}
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            {{#each shifts}}
+            <tr>
+                <td class="col1">{{time}}</td>
+                <td class="col2">{{names}}</td>
+                <td class="col3 md:table-cell">{{notes}}<strong>{{notes_bold}}</strong></td>
+            </tr>
+            {{/each}}
+        </tbody>
+    </table>
+    <div style="page-break-before: always;"></div>
+    <div style="margin-bottom: 50px;"></div>
+    {{#if @last}}
+    <!-- Don't add margin after the last table -->
+    {{else}}
+    <!-- Add margin after the table -->
+    <br><br><br>
+    {{/if}}
+    {{/each}}
+</body>
+
+</html>

src/templates/word.html

@@ -78,12 +78,13 @@
         .week5 {
             background-color: #C785C8;
         }
+        
     </style>
 </head>
 
 <body>
     {{#each events}}
-    <div style="page-break-before: always;"></div>
+    <div style="page-break-before: always;" class="hidden md:block"></div>
     <table>
         <thead class="week{{week}}">
             <tr>
@@ -97,7 +98,7 @@
             <tr>
                 <td class="col1">{{time}}</td>
                 <td class="col2">{{names}}</td>
-                <td class="col3">{{notes}}<strong>{{notes_bold}}</strong></td>
+                <td class="col3 md:table-cell">{{notes}}<strong>{{notes_bold}}</strong></td>
             </tr>
             {{/each}}
         </tbody>