From 7412bc217c507ab3c480436fb3083d770e6785fc Mon Sep 17 00:00:00 2001
From: konstroyer <kmiola@ethz.ch>
Date: Sun, 5 Jan 2025 13:48:54 +0000
Subject: [PATCH 1/2] change sidebar icons and reforganize form fields

---
 src/pages/Belegformular.tsx |   4 +-
 src/pages/Bills.tsx         |  32 +++---
 src/pages/CreditPayment.tsx |  17 +--
 src/pages/Reimbursement.tsx |  14 +--
 src/pages/index.tsx         | 212 ++++++++++++++++++++++++++++++++++--
 src/pages/root.tsx          |  60 +++++-----
 6 files changed, 269 insertions(+), 70 deletions(-)

diff --git a/src/pages/Belegformular.tsx b/src/pages/Belegformular.tsx
index 8eeb520..db1d292 100644
--- a/src/pages/Belegformular.tsx
+++ b/src/pages/Belegformular.tsx
@@ -65,9 +65,9 @@ const MainForm: React.FC = () => {
           value={selectedType}
           onChange={handleTypeChange}
         >
-          <MenuItem value="beleg">Beleg</MenuItem>
+          <MenuItem value="beleg">Reimbursement</MenuItem>
           <MenuItem value="bill">Bill</MenuItem>
-          <MenuItem value="creditPayment">Credit Payment</MenuItem>
+          <MenuItem value="creditPayment">Credit Card Receipt</MenuItem>
           <MenuItem value="internaltransfer">Internal Transfer</MenuItem>
         </Select>
       </FormControl>
diff --git a/src/pages/Bills.tsx b/src/pages/Bills.tsx
index 9022cb3..d027747 100644
--- a/src/pages/Bills.tsx
+++ b/src/pages/Bills.tsx
@@ -18,54 +18,54 @@ export function generateFieldConfigs(
   q_mode: boolean = false,
 ): FieldConfig<BillCreate>[] {
   return [
+    { name: "creditor.comment", label: "Description", type: FieldType.STRING },
+    { name: "creditor.amount", label: "Amount", type: FieldType.NUMERIC },
+    { name: "creditor.currency", label: "Currency", type: FieldType.STRING },
     {
       name: "creditor.kst_id",
-      label: "kst",
+      label: "Cost Center",
       type: FieldType.STRING,
       items: kst.map((k) => ({ label: Kst_title(k), value: k.id ? k.id : "" })),
     },
     {
       name: "creditor.ledger_id",
-      label: "ledger",
+      label: "Ledger",
       type: FieldType.STRING,
       items: ledger.map((l) => ({
         label: Ledger_title(l),
         value: l.id ? l.id : "",
       })),
     },
-    { name: "creditor.amount", label: "amount", type: FieldType.NUMERIC },
-    { name: "creditor.currency", label: "währung", type: FieldType.STRING },
-    { name: "creditor.comment", label: "kommentar", type: FieldType.STRING },
-    { name: "address.name", label: "Recipient Name", type: FieldType.STRING },
+    { name: "address.name", label: "Company Name", type: FieldType.STRING },
     {
       name: "address.address1",
-      label: "Recipient Optional Addr field",
+      label: "Address Line 1",
       type: FieldType.STRING,
     },
     {
       name: "address.address2",
-      label: "Recipient street and Nr",
+      label: "Address Line 2 (optional)",
       type: FieldType.STRING,
     },
     {
       name: "address.address3",
-      label: "Recipient Optional ",
+      label: "Address Line 3 (optional)",
       type: FieldType.STRING,
     },
-    { name: "address.plz", label: "Recipient PLZ", type: FieldType.NUMERIC },
-    { name: "address.city", label: "Recipient City", type: FieldType.STRING },
+    { name: "address.plz", label: "ZIP Code", type: FieldType.NUMERIC },
+    { name: "address.city", label: "City", type: FieldType.STRING },
     {
       name: "address.country",
-      label: "Recipient Country",
+      label: "Country",
       type: FieldType.STRING,
     },
     {
       name: "reference",
-      label: "Recipient reference",
+      label: "(QR-) Reference",
       type: FieldType.STRING,
     },
-    { name: "iban", label: "Recipient iban", type: FieldType.STRING },
-    { name: "reciept", label: "reciept", type: FieldType.FILE },
+    { name: "iban", label: "Iban", type: FieldType.STRING },
+    { name: "reciept", label: "receipt", type: FieldType.FILE },
     { name: "comment", label: "comment", type: FieldType.STRING },
   ];
 }
@@ -120,7 +120,7 @@ export default function GenerateBill() {
     <Container>
       <ObjectEditor
         fieldConfigs={fieldConfig}
-        header="Add Item"
+        header="Enter Bill"
         submitter={submitter}
         initial={initialElement}
       />
diff --git a/src/pages/CreditPayment.tsx b/src/pages/CreditPayment.tsx
index a8e0b8c..44cacec 100644
--- a/src/pages/CreditPayment.tsx
+++ b/src/pages/CreditPayment.tsx
@@ -24,32 +24,33 @@ export function generateFieldConfigs(
   qmode: boolean,
 ): FieldConfig<CreditPaymentCreate>[] {
   return [
+    { name: "creditor.comment", label: "Description", type: FieldType.STRING },
+    { name: "creditor.amount", label: "Amount", type: FieldType.NUMERIC },
+    { name: "creditor.currency", label: "Currency", type: FieldType.STRING },
+    
     {
       name: "creditor.kst_id",
-      label: "kst",
+      label: "Cost Center",
       type: FieldType.STRING,
       items: kst.map((k) => ({ label: Kst_title(k), value: k.id ? k.id : "" })),
     },
     {
       name: "creditor.ledger_id",
-      label: "ledger",
+      label: "Ledger",
       type: FieldType.STRING,
       items: ledger.map((l) => ({
         label: Ledger_title(l),
         value: l.id ? l.id : "",
       })),
     },
-    { name: "creditor.amount", label: "amount", type: FieldType.NUMERIC },
-    { name: "creditor.currency", label: "währung", type: FieldType.STRING },
-    { name: "creditor.comment", label: "kommentar", type: FieldType.STRING },
     {
       name: "card",
-      label: "creditcard",
+      label: "Creditcard",
       type: FieldType.STRING,
       items: [
         { label: "President", value: Card.PRESIDENT },
         { label: "Events", value: Card.EVENTS },
-        { label: "Quastor", value: Card.QUAESTOR },
+        { label: "Quaestor", value: Card.QUAESTOR },
       ],
     },
     { name: "reciept", label: "reciept", type: FieldType.FILE },
@@ -95,7 +96,7 @@ export default function GenerateCreditPayment() {
     <Container>
       <ObjectEditor
         fieldConfigs={fieldConfig}
-        header="Add Item"
+        header="Add Credit Card Receipt"
         submitter={submitter}
         initial={initialElement}
       />
diff --git a/src/pages/Reimbursement.tsx b/src/pages/Reimbursement.tsx
index 474f7c2..ff2c7ad 100644
--- a/src/pages/Reimbursement.tsx
+++ b/src/pages/Reimbursement.tsx
@@ -50,25 +50,25 @@ export function generateFieldConfigs(
   }
 
   return [
+    { name: "creditor.comment", label: "Description", type: FieldType.STRING },
+    { name: "creditor.amount", label: "Amount", type: FieldType.NUMERIC },
+    { name: "creditor.currency", label: "Currency", type: FieldType.STRING },
     {
       name: "creditor.kst_id",
-      label: "kst",
+      label: "Cost Center",
       type: FieldType.STRING,
       items: kst.map((k) => ({ label: Kst_title(k), value: k.id ? k.id : "" })),
     },
     {
       name: "creditor.ledger_id",
-      label: "ledger",
+      label: "Ledger",
       type: FieldType.STRING,
       items: ledger.map((l) => ({
         label: Ledger_title(l),
         value: l.id ? l.id : "",
       })),
     },
-    { name: "creditor.amount", label: "amount", type: FieldType.NUMERIC },
-    { name: "creditor.currency", label: "währung", type: FieldType.STRING },
-    { name: "creditor.comment", label: "kommentar", type: FieldType.STRING },
-    { name: "reciept", label: "reciept", type: FieldType.FILE },
+    { name: "reciept", label: "Receipt", type: FieldType.FILE },
     ...qfields,
   ];
 }
@@ -117,7 +117,7 @@ export default function GenerateReimbursement() {
     <Container>
       <ObjectEditor
         fieldConfigs={fieldConfig}
-        header="Add Reimbursement"
+        header="Request Reimbursement"
         submitter={submitter}
         initial={initialElement}
       />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e452489..a01eea0 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,25 +1,215 @@
-import React from "react";
-import { Container, CircularProgress, Typography, Box } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import {
+  Container,
+  Box,
+  Typography,
+  Button,
+  Link,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Grid,
+} from "@mui/material";
+import { combinedReadCombinedPayments, authGetBasicUserInfo } from "../client/services.gen";
+
+export default function WelcomeToQTool() {
+  const [lastFiveEntries, setLastFiveEntries] = useState<any[]>([]);
+  const [user, setUser] = useState<any | null>(null);
+  const [isFetchingUser, setIsFetchingUser] = useState(true);
+
+  // Function to fetch user info and data
+  const fetchUserAndData = async () => {
+    try {
+      setIsFetchingUser(true);
+      // Fetch user info
+      const userResponse = await authGetBasicUserInfo();
+      if (userResponse.error) {
+        console.error("Failed to fetch user info:", userResponse.error);
+        setUser(null);
+      } else {
+        setUser(userResponse.data);
+        // Fetch last 5 entries if user is authenticated
+        const paymentResponse = await combinedReadCombinedPayments({
+          query: {
+            search: "",
+            sort: "id:desc",
+          },
+        });
+        if (paymentResponse.error) {
+          console.error("Error fetching combined payments:", paymentResponse.error);
+        } else {
+          setLastFiveEntries(paymentResponse.data.items.slice(0, 5));
+        }
+      }
+    } catch (error) {
+      console.error("Error fetching data:", error);
+      setUser(null);
+    } finally {
+      setIsFetchingUser(false);
+    }
+  };
+
+  // Fetch data on mount and when user state changes
+  useEffect(() => {
+    fetchUserAndData();
+  }, []);
+
+  // Trigger re-fetch when login state changes (e.g., through global state or a login action)
+  const handleLogin = () => {
+    fetchUserAndData();
+  };
+
+  if (isFetchingUser) {
+    return (
+      <Container sx={{ textAlign: "center", padding: 2 }}>
+        <Typography variant="h6">Loading...</Typography>
+      </Container>
+    );
+  }
 
-export default function Index() {
   return (
     <Container
       sx={{
         display: "flex",
-        flexDirection: "column", // Stack children vertically
+        flexDirection: "column",
         justifyContent: "center",
-        alignItems: "center", // Center horizontally
+        alignItems: "center",
         padding: 2,
-        height: "100vh", // Ensure full viewport height
+        height: "100vh",
+        textAlign: "center",
       }}
     >
-      <Box sx={{ textAlign: "center", marginBottom: 2 }}>
-        <Typography variant="h6">
-          This page is still work in Progress, but check out the pages in the
-          side bar, you are up for a treat.
+      <Box sx={{ marginBottom: 4 }}>
+        <Typography variant="h4" sx={{ fontWeight: "bold" }}>
+          Welcome to QTool!
         </Typography>
       </Box>
-      <CircularProgress />
+
+      {user ? (
+        <>
+          <Box sx={{ width: "100%", maxWidth: "600px", marginBottom: 4 }}>
+            <Grid container spacing={2} justifyContent="center">
+              <Grid item xs={6}>
+                <Link href="/Belegformular" underline="none">
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    size="large"
+                    sx={{ width: "100%" }}
+                  >
+                    Reimbursement Request
+                  </Button>
+                </Link>
+              </Grid>
+              <Grid item xs={6}>
+                <Link href="/Belegformular" underline="none">
+                  <Button
+                    variant="contained"
+                    color="secondary"
+                    size="large"
+                    sx={{ width: "100%" }}
+                  >
+                    Credit Card Form
+                  </Button>
+                </Link>
+              </Grid>
+              <Grid item xs={6}>
+                <Link href="/CombinedList" underline="none">
+                  <Button
+                    variant="contained"
+                    color="success"
+                    size="large"
+                    sx={{ width: "100%" }}
+                  >
+                    My Requests and Payments
+                  </Button>
+                </Link>
+              </Grid>
+              <Grid item xs={6}>
+                <Link href="/support" underline="none">
+                  <Button
+                    variant="contained"
+                    color="info"
+                    size="large"
+                    sx={{ width: "100%" }}
+                  >
+                    Settings
+                  </Button>
+                </Link>
+              </Grid>
+            </Grid>
+          </Box>
+          <Box sx={{ maxWidth: "600px", marginBottom: 4 }}>
+            <Typography variant="body1">
+              For more information, please visit the official QTool documentation linked below. If
+              you face a problem of financial nature, contact the AMIV Finance Team at{" "}
+              <Link href="mailto:quaestor@amiv.ethz.ch" underline="hover" color="primary">
+                quaestor@amiv.ethz.ch
+              </Link>
+              . For technical issues, reach out to the AMIV IT Team at{" "}
+              <Link href="mailto:it@amiv.ethz.ch" underline="hover" color="primary">
+                it@amiv.ethz.ch
+              </Link>
+              .
+            </Typography>
+          </Box>
+          <Box sx={{ marginTop: 0 }}>
+            <Link
+              href="https://wiki.vseth.ethz.ch/x/BQBLHQ"
+              underline="none"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button variant="contained" color="warning" size="large" sx={{ width: "300px" }}>
+                QTool Documentation
+              </Button>
+            </Link>
+          </Box>
+          <Box sx={{ marginTop: 4, width: "100%", maxWidth: "600px" }}>
+            <Typography variant="h6" sx={{ marginBottom: 2 }}>
+              Latest Requests:
+            </Typography>
+            <TableContainer component={Paper}>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableCell>Name</TableCell>
+                    <TableCell>Amount</TableCell>
+                    <TableCell>Kst</TableCell>
+                    <TableCell>Status</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {lastFiveEntries.map((row, index) => (
+                    <TableRow key={row.id || index}>
+                      <TableCell>{row.creditor?.name || "Unknown"}</TableCell>
+                      <TableCell>{row.creditor?.amount || "N/A"}</TableCell>
+                      <TableCell>{row.creditor?.kst || "N/A"}</TableCell>
+                      <TableCell>{row.creditor?.q_check || "N/A"}</TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </Box>
+        </>
+      ) : (
+        <Box sx={{ textAlign: "center" }}>
+          <Typography variant="h6" sx={{ marginBottom: 2 }}>
+            Please log in to access your dashboard.
+            If this is your first time using QTool, please complete the onboarding process after logging in. The onboarding process is mandatory and will unlock the full functionality of QTool.
+          </Typography>
+          <Link href="/login" underline="none">
+            <Button variant="contained" color="primary" size="large" onClick={handleLogin}>
+              Log In
+            </Button>
+          </Link>
+        </Box>
+      )}
     </Container>
   );
 }
diff --git a/src/pages/root.tsx b/src/pages/root.tsx
index 639fb25..8331f91 100644
--- a/src/pages/root.tsx
+++ b/src/pages/root.tsx
@@ -30,6 +30,17 @@ import {
   Payment,
   Settings,
   ShoppingCart,
+  ReceiptLong,
+  CreditScore,
+  Summarize,
+  ViewList,
+  PlaylistRemove,
+  Reorder,
+  Category,
+  Extension,
+  ShowChart,
+  AccountTree,
+  School,
 } from "@mui/icons-material";
 import ReceiptIcon from "@mui/icons-material/Receipt"; // Import the Receipt icon
 import { Link } from "react-router-dom";
@@ -40,50 +51,47 @@ import Callback from "../Callback";
 
 const navContent = [
   {
-    path: "/creditlist",
-    name: "Credit List",
-    icon: <Checklist />,
+    path: "/Belegformular",
+    name: "Receipt Form",
+    icon: <ReceiptLong />,
+  },
+  { path: "/combinedList", 
+    name: "My Payments", 
+    icon: <Reorder /> },
+  {
+    path: "/KstEval",
+    name: "Cost Center Evaluation",
+    icon: <ShowChart />,
   },
-  { path: "/combinedList", name: "Combined List", icon: <Checklist /> },
   {
     path: "/UncheckedPayments",
-    name: "Unchecked Payments",
-    icon: <Checklist />,
+    name: "Open Requests",
+    icon: <PlaylistRemove />,
   },
   {
-    path: "/Belegformular",
-    name: "Belegformular",
-    icon: <ReceiptIcon />,
+    path: "/creditlist",
+    name: "Credit List",
+    icon: <ViewList />,
   },
   {
     path: "/GenerateItem",
-    name: "Generate New Item",
-    icon: <Payment />,
+    name: "Add Item",
+    icon: <Category />,
   },
   {
     path: "/GenerateLedger",
-    name: "Generate New Ledger",
-    icon: <Payment />,
+    name: "Add Ledger",
+    icon: <Extension />,
   },
   {
     path: "/GenerateKst",
-    name: "Generate New Kst",
-    icon: <Payment />,
-  },
-  {
-    path: "/internaltransfer",
-    name: "Internal Transfer",
-    icon: <ShoppingCart />,
+    name: "Add Cost Center",
+    icon: <AccountTree />,
   },
   {
     path: "/Onboarding",
     name: "Onboarding",
-    icon: <Groups />,
-  },
-  {
-    path: "/KstEval",
-    name: "Kst Evaluation",
-    icon: <Groups />,
+    icon: <School />,
   },
 ] as { path: string; name: string; icon: React.ReactNode }[];
 
-- 
GitLab


From b8e3f0108275ba1905097a2866b1d63675224d12 Mon Sep 17 00:00:00 2001
From: clemens <cwalter@ethz.ch>
Date: Mon, 6 Jan 2025 08:06:42 +0000
Subject: [PATCH 2/2] add KST to cost center

---
 src/pages/Bills.tsx         | 2 +-
 src/pages/CreditPayment.tsx | 2 +-
 src/pages/Reimbursement.tsx | 2 +-
 src/pages/root.tsx          | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/Bills.tsx b/src/pages/Bills.tsx
index d027747..753a622 100644
--- a/src/pages/Bills.tsx
+++ b/src/pages/Bills.tsx
@@ -23,7 +23,7 @@ export function generateFieldConfigs(
     { name: "creditor.currency", label: "Currency", type: FieldType.STRING },
     {
       name: "creditor.kst_id",
-      label: "Cost Center",
+      label: "KST | Cost Center",
       type: FieldType.STRING,
       items: kst.map((k) => ({ label: Kst_title(k), value: k.id ? k.id : "" })),
     },
diff --git a/src/pages/CreditPayment.tsx b/src/pages/CreditPayment.tsx
index 44cacec..e71e782 100644
--- a/src/pages/CreditPayment.tsx
+++ b/src/pages/CreditPayment.tsx
@@ -30,7 +30,7 @@ export function generateFieldConfigs(
     
     {
       name: "creditor.kst_id",
-      label: "Cost Center",
+      label: "KST | Cost Center",
       type: FieldType.STRING,
       items: kst.map((k) => ({ label: Kst_title(k), value: k.id ? k.id : "" })),
     },
diff --git a/src/pages/Reimbursement.tsx b/src/pages/Reimbursement.tsx
index ff2c7ad..8a5fbba 100644
--- a/src/pages/Reimbursement.tsx
+++ b/src/pages/Reimbursement.tsx
@@ -55,7 +55,7 @@ export function generateFieldConfigs(
     { name: "creditor.currency", label: "Currency", type: FieldType.STRING },
     {
       name: "creditor.kst_id",
-      label: "Cost Center",
+      label: "KST | Cost Center",
       type: FieldType.STRING,
       items: kst.map((k) => ({ label: Kst_title(k), value: k.id ? k.id : "" })),
     },
diff --git a/src/pages/root.tsx b/src/pages/root.tsx
index 8331f91..36370be 100644
--- a/src/pages/root.tsx
+++ b/src/pages/root.tsx
@@ -60,7 +60,7 @@ const navContent = [
     icon: <Reorder /> },
   {
     path: "/KstEval",
-    name: "Cost Center Evaluation",
+    name: "KST | Cost Center Evaluation",
     icon: <ShowChart />,
   },
   {
@@ -85,7 +85,7 @@ const navContent = [
   },
   {
     path: "/GenerateKst",
-    name: "Add Cost Center",
+    name: "Add Cost Center | KST",
     icon: <AccountTree />,
   },
   {
-- 
GitLab