Skip to content

Add thesis change request frontend support #320

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kotangale237 wants to merge 1 commit into from
Closed

Add thesis change request frontend support #320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions src/Modules/Academic/courseRegistrationReceipt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ export default function downloadCourseRegistrationReceipt({
: "Prev. Sem. CPI: -";

try {
const doc = new jsPDF({
const JsPDF = jsPDF;
const doc = new JsPDF({
orientation: "portrait",
unit: "mm",
format: "legal",
Expand Down Expand Up @@ -60,7 +61,6 @@ export default function downloadCourseRegistrationReceipt({
`Semester: ${studentInfo.semester || ""}`,
];

const tableWidth = pageWidth - 40;
const tableStartX = 20;
const tableEndX = pageWidth - 20;
const availableWidth = tableEndX - tableStartX;
Expand Down Expand Up @@ -215,7 +215,6 @@ export default function downloadCourseRegistrationReceipt({
`Semester: ${studentInfo.semester || ""}`,
];

const academicTableWidth = pageWidth - 40;
const academicTableStartX = 20;
const academicTableEndX = pageWidth - 20;
const academicAvailableWidth = academicTableEndX - academicTableStartX;
Expand Down
273 changes: 127 additions & 146 deletions src/Modules/Dashboard/StudentProfile/bankDetailsComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,178 +1,159 @@
import { useState } from "react";
import PropTypes from "prop-types";
import { useState, useEffect } from "react";
import {
Alert,
Button,
Grid,
Group,
Stack,
Table,
Text,
Button,
Flex,
Divider,
TextInput,
Center,
Loader,
} from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { Bank, Check, Info, PencilSimple, X } from "@phosphor-icons/react";
import axios from "axios";
import { studentProfileUpdateRoute } from "../../../routes/globalRoutes";
import { DASH, Field, HALF, ReadOnlyValue, SectionCard } from "./profileUi";
import { studentBankDetailsRoute } from "../../../routes/dashboardRoutes";

const FIELDS = [
{
key: "bank_name",
label: "Bank Name",
placeholder: "e.g. State Bank of India",
},
{
key: "bank_account_no",
label: "Bank Account No.",
placeholder: "9 to 18 digits",
clean: (value) => String(value || "").replace(/\D/g, ""),
},
{
key: "ifsc_code",
label: "IFSC Code",
placeholder: "e.g. SBIN0001234",
clean: (value) =>
String(value || "")
.toUpperCase()
.replace(/[^A-Z0-9]/g, "")
.slice(0, 11),
},
{ key: "account_holder_name", label: "Account Holder Name" },
{ key: "bank_name", label: "Bank Name" },
{ key: "branch_name", label: "Branch Name" },
{ key: "account_number", label: "Account Number" },
{ key: "ifsc_code", label: "IFSC Code" },
];

export default function BankDetailsComponent({ record, onSaved }) {
const [editing, setEditing] = useState(false);
const [form, setForm] = useState({});
const [errors, setErrors] = useState({});
const [saving, setSaving] = useState(false);
function BankDetailsComponent() {
const [loading, setLoading] = useState(true);
const [isEditing, setIsEditing] = useState(false);
const [submitting, setSubmitting] = useState(false);
const [bankDetails, setBankDetails] = useState({
account_holder_name: "",
bank_name: "",
branch_name: "",
account_number: "",
ifsc_code: "",
});

const value = (key) => (key in form ? form[key] : (record?.[key] ?? ""));
useEffect(() => {
const token = localStorage.getItem("authToken");
if (!token) {
setLoading(false);
return;
}
axios
.get(studentBankDetailsRoute, {
headers: { Authorization: `Token ${token}` },
})
.then((res) => {
if (res.data && Object.keys(res.data).length > 0) {
setBankDetails((prev) => ({ ...prev, ...res.data }));
}
})
.catch(() => {
notifications.show({
message: "Error fetching bank details.",
color: "red",
});
})
.finally(() => setLoading(false));
}, []);

const cancel = () => {
setForm({});
setErrors({});
setEditing(false);
const handleChange = (field, value) => {
setBankDetails((prev) => ({ ...prev, [field]: value }));
};

const save = async () => {
const changed = Object.fromEntries(
Object.entries(form).filter(
([key]) => form[key] !== (record?.[key] ?? ""),
),
);
if (!Object.keys(changed).length) {
cancel();
const handleEditClick = async () => {
const token = localStorage.getItem("authToken");
if (!token) {
notifications.show({
message: "Authentication required. Please log in again.",
color: "red",
});
return;
}
if (!isEditing) {
setIsEditing(true);
return;
}
setSaving(true);
if (submitting) return;
setSubmitting(true);
try {
const token = localStorage.getItem("authToken");
const { data } = await axios.post(studentProfileUpdateRoute, changed, {
headers: token ? { Authorization: `Token ${token}` } : {},
const res = await axios.post(studentBankDetailsRoute, bankDetails, {
headers: { Authorization: `Token ${token}` },
});
onSaved(data.data);
notifications.show({ message: "Bank details saved.", color: "green" });
cancel();
} catch (err) {
const body = err.response?.data;
setErrors(body?.errors || {});
setBankDetails((prev) => ({ ...prev, ...res.data }));
notifications.show({
title: "Could not save",
message: body?.message || "Please try again.",
message: "Bank details updated successfully!",
color: "green",
});
setIsEditing(false);
} catch {
notifications.show({
message: "Error updating bank details. Please try again.",
color: "red",
});
} finally {
setSaving(false);
setSubmitting(false);
}
};

const actions = editing ? (
<Group gap="xs" wrap="nowrap">
<Button
size="xs"
variant="default"
leftSection={<X size={14} />}
onClick={cancel}
disabled={saving}
>
Cancel
</Button>
<Button
size="xs"
leftSection={<Check size={14} />}
onClick={save}
loading={saving}
>
Save changes
</Button>
</Group>
) : (
<Button
size="xs"
variant="light"
leftSection={<PencilSimple size={14} />}
onClick={() => setEditing(true)}
>
Edit details
</Button>
);
if (loading) {
return (
<Center style={{ height: 150 }}>
<Loader />
</Center>
);
}

return (
<Stack gap="md" w="100%">
<SectionCard
icon={<Bank size={18} />}
title="Bank Details"
description="Used for stipend and reimbursement payments"
action={actions}
<Flex
w={{ base: "100%", sm: "60%" }}
p="md"
gap="md"
style={{ border: "1px solid lightgray", borderRadius: "5px" }}
direction="column"
justify="space-evenly"
>
<Flex
w="100%"
p="md"
direction="column"
style={{ border: "1px solid lightgray", borderRadius: "5px" }}
>
<Grid gutter="md">
{FIELDS.map((field) => (
<Field key={field.key} label={field.label} span={HALF}>
{editing ? (
<TextInput
value={String(value(field.key) ?? "")}
error={errors[field.key]}
placeholder={field.placeholder}
onChange={(event) => {
const next = field.clean
? field.clean(event.currentTarget.value)
: event.currentTarget.value;
setForm((prev) => ({ ...prev, [field.key]: next }));
setErrors((prev) => ({ ...prev, [field.key]: undefined }));
}}
/>
) : (
<ReadOnlyValue>
{String(record?.[field.key] || "").trim() || DASH}
</ReadOnlyValue>
)}
</Field>
))}
</Grid>

<Alert
variant="light"
color="blue"
radius="md"
icon={<Info size={18} />}
mt="md"
>
<Text size="sm">
Keep this the account in your own name. Payments fail if the name on
the account does not match your records.
<Flex w="100%" justify="space-between" align="center">
<Text fw={500} size="1.2rem">
Bank Account Details
</Text>
</Alert>
</SectionCard>
</Stack>
<Button
onClick={handleEditClick}
color={isEditing ? "green" : "red"}
loading={submitting}
>
{isEditing ? "Save" : "Edit"}
</Button>
</Flex>
<Divider my="sm" />
<Table striped highlightOnHover withTableBorder withColumnBorders>
<Table.Tbody>
{FIELDS.map(({ key, label }) => (
<Table.Tr key={key}>
<Table.Td fw={500}>{label}</Table.Td>
<Table.Td>
{isEditing ? (
<TextInput
value={bankDetails[key] || ""}
onChange={(e) => handleChange(key, e.target.value)}
/>
) : (
bankDetails[key] || "—"
)}
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
</Flex>
</Flex>
);
}

BankDetailsComponent.propTypes = {
record: PropTypes.shape({
bank_name: PropTypes.string,
bank_account_no: PropTypes.string,
ifsc_code: PropTypes.string,
}),
onSaved: PropTypes.func.isRequired,
};

BankDetailsComponent.defaultProps = { record: null };
export default BankDetailsComponent;
46 changes: 27 additions & 19 deletions src/Modules/Examination/submitGradesProf.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -638,25 +638,33 @@ function SubmitCourseGradesTab() {
</tr>
</thead>
<tbody>
{previewData.map((r, i) => (
<tr
key={i}
style={{
backgroundColor: r.is_registered ? undefined : "#ffe6e6",
}}
>
<td>{i + 1}</td>
<td>{r.roll_no}</td>
<td>{r.name}</td>
<td>{r.branch || "-"}</td>
<td>{r.grades}</td>
<td>{r.remarks}</td>
<td>{r.semester}</td>
<td style={{ color: r.is_registered ? "green" : "red" }}>
{r.is_registered ? "Registered" : "Missing Registration"}
</td>
</tr>
))}
{previewData.map((r, i) => {
const hasIssue = !r.is_registered || r.grade_valid === false;
const statusText = !r.is_registered
? "Missing Registration"
: r.grade_valid === false
? r.grade_error
: "Registered";
return (
<tr
key={i}
style={{
backgroundColor: hasIssue ? "#ffe6e6" : undefined,
}}
>
<td>{i + 1}</td>
<td>{r.roll_no}</td>
<td>{r.name}</td>
<td>{r.branch || "-"}</td>
<td>{r.grades}</td>
<td>{r.remarks}</td>
<td>{r.semester}</td>
<td style={{ color: hasIssue ? "red" : "green" }}>
{statusText}
</td>
</tr>
);
})}
</tbody>
</Table>

Expand Down
Loading
Loading