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