-
+ <>
+
+
+
- {/* From Date */}
-
-
-
handleChange('fromDate', e.target.value)}
- className={`input input-bordered input-sm ${errors.fromDate ? "input-error" : ""
- }`}
- />
- {errors.fromDate &&
{errors.fromDate}
}
+
+ {/* From Date */}
+
+
+
handleChange('fromDate', e.target.value)}
+ className={`input input-bordered input-sm ${errors.fromDate ? "input-error" : ""
+ }`}
+ />
+ {errors.fromDate &&
{errors.fromDate}
}
+
+
+ {/* To Date */}
+
+
+
handleChange('toDate', e.target.value)}
+ className={`input input-bordered input-sm ${errors.toDate ? "input-error" : ""
+ }`}
+ />
+ {errors.toDate &&
{errors.toDate}
}
+
+
+ {/* Comment */}
+
+
+
handleChange('comment', val)}
+ className="h-60"
+ />
+ {errors.comment && {errors.comment}
}
+
- {/* To Date */}
-
-
-
handleChange('toDate', e.target.value)}
- className={`input input-bordered input-sm ${errors.toDate ? "input-error" : ""
- }`}
- />
- {errors.toDate &&
{errors.toDate}
}
-
+ {serverError && (
+
{serverError}
+ )}
- {/* Comment */}
-
-
- handleChange('comment', val)}
- className="h-60"
- />
-
-
- {errors.comment &&
{errors.comment}
}
+
-
-
-
+
);
};
diff --git a/src/ui/pages/LeaveAndAdjustments/tabs/SickLeaveTab.tsx b/src/ui/pages/LeaveAndAdjustments/tabs/SickLeaveTab.tsx
index 2977cd8..180e6ae 100644
--- a/src/ui/pages/LeaveAndAdjustments/tabs/SickLeaveTab.tsx
+++ b/src/ui/pages/LeaveAndAdjustments/tabs/SickLeaveTab.tsx
@@ -19,33 +19,102 @@ const SickLeaveTab: React.FC<{
toDate: '',
comment: ''
});
+ const [serverError, setServerError] = useState("");
const quillRef = useRef
(null);
const [sickErrors, setSickErrors] = useState>({});
useEffect(() => {
const editor = quillRef.current?.getEditor();
-
if (!editor) return;
- editor.getModule("clipboard").addMatcher(Node.ELEMENT_NODE, (node: any, delta: any) => {
- return delta;
- });
+ // Override image handler in toolbar
+ editor.getModule("toolbar").handlers.image = () => {
+ const input = document.createElement("input");
+ input.setAttribute("type", "file");
+ input.setAttribute("accept", "image/*");
+ input.click();
- editor.root.addEventListener("paste", async (e: any) => {
- const items = e.clipboardData?.items;
-
- if (!items) return;
-
- for (const item of items) {
- if (item.type.indexOf("image") === 0) {
- const file = item.getAsFile();
+ input.onchange = async () => {
+ const file = input.files?.[0];
+ if (file) {
const base64 = await convertToBase64(file);
-
const range = editor.getSelection();
- editor.insertEmbed(range.index, "image", base64);
+ if (range) {
+ editor.insertEmbed(range.index, "image", base64);
+ }
+ }
+ };
+ };
+
+ // COMPLETELY disable Quill's default paste behavior
+ const disableQuillPaste = () => {
+ // Remove all existing paste event listeners from Quill
+ const pasteListeners = (editor.root as any).__pasteHandlers || [];
+ pasteListeners.forEach((handler: any) => {
+ editor.root.removeEventListener('paste', handler);
+ });
+
+ // Override the clipboard module to do nothing
+ const clipboard = editor.getModule('clipboard');
+ const originalPaste = clipboard.paste;
+ clipboard.paste = (e: any) => {
+ // Completely prevent Quill's default paste behavior
+ e.preventDefault();
+ e.stopPropagation();
+ return false;
+ };
+ };
+
+ disableQuillPaste();
+
+ // Our custom paste handler - this is the ONLY handler that will run
+ const handlePaste = async (e: ClipboardEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const items = e.clipboardData?.items;
+ if (!items || items.length === 0) return;
+
+ // Check for images first
+ for (let i = 0; i < items.length; i++) {
+ const item = items[i];
+ if (item.type.startsWith("image/")) {
+ const file = item.getAsFile();
+ if (file) {
+ try {
+ const base64 = await convertToBase64(file);
+ const range = editor.getSelection(true);
+ if (range !== null) {
+ // Insert the image
+ editor.insertEmbed(range.index, "image", base64);
+ // Move cursor after the image
+ editor.setSelection(range.index + 1, 0);
+ }
+ } catch (error) {
+ console.error("Error processing pasted image:", error);
+ }
+ }
+ return; // Exit after handling the first image
}
}
- });
+
+ // If no images found, handle text
+ const text = e.clipboardData?.getData('text/plain');
+ if (text) {
+ const range = editor.getSelection(true);
+ if (range !== null) {
+ editor.insertText(range.index, text);
+ editor.setSelection(range.index + text.length, 0);
+ }
+ }
+ };
+
+ // Add our custom paste handler with high priority
+ editor.root.addEventListener("paste", handlePaste, true);
+
+ return () => {
+ editor.root.removeEventListener("paste", handlePaste, true);
+ };
}, []);
const convertToBase64 = (file: File): Promise =>
@@ -90,7 +159,7 @@ const SickLeaveTab: React.FC<{
toDate: "",
comment: ""
};
-
+
setSickLeave(emptyForm);
setSickErrors({});
@@ -102,6 +171,7 @@ const SickLeaveTab: React.FC<{
};
const handleSubmit = async () => {
+ setServerError("")
const errors = validateLeaveForm(sickLeave);
if (Object.keys(errors).length > 0) {
@@ -109,20 +179,23 @@ const SickLeaveTab: React.FC<{
return;
}
- const success = await submitLeave({
+ const result = await submitLeave({
dateFrom: sickLeave.fromDate,
dateTo: sickLeave.toDate,
leaveType: "SICK",
comment: sickLeave.comment,
});
- if (success) {
+ if (result.success) {
resetForm();
alert("SICK submitted!");
+ } else {
+ setServerError(result.message || "Something went wrong");
}
};
return (
+ <>
@@ -182,13 +255,17 @@ const SickLeaveTab: React.FC<{
className="h-60"
/>
- {sickErrors.comment && (
-
- )}
+ {sickErrors.comment && (
+
+ )}
+ {serverError && (
+
{serverError}
+ )}
+
{/* Submit Button */}
+
);
};
diff --git a/src/ui/pages/Schedule/Schedule.tsx b/src/ui/pages/Schedule/Schedule.tsx
new file mode 100644
index 0000000..36fdcfb
--- /dev/null
+++ b/src/ui/pages/Schedule/Schedule.tsx
@@ -0,0 +1,100 @@
+const Schedule = () => {
+ const rows = [
+ {
+ period: "Oct 25, 2025 to Nov 07, 2025",
+ cutoff: "Nov 11, 2025 05:29:59 AM",
+ payDate: "Nov 14, 2025"
+ },
+ {
+ period: "Nov 08, 2025 to Nov 21, 2025",
+ cutoff: "Nov 25, 2025 05:29:59 AM",
+ payDate: "Nov 28, 2025"
+ },
+ {
+ period: "Nov 22, 2025 to Dec 05, 2025",
+ cutoff: "Dec 09, 2025 05:29:59 AM",
+ payDate: "Dec 12, 2025"
+ },
+ {
+ period: "Dec 06, 2025 to Dec 19, 2025",
+ cutoff: "Dec 23, 2025 05:29:59 AM",
+ payDate: "Dec 26, 2025"
+ },
+ {
+ period: "Dec 20, 2025 to Jan 02, 2026",
+ cutoff: "Jan 06, 2026 05:29:59 AM",
+ payDate: "Jan 09, 2026"
+ },
+ {
+ period: "Jan 03, 2026 to Jan 16, 2026",
+ cutoff: "Jan 20, 2026 05:29:59 AM",
+ payDate: "Jan 23, 2026"
+ },
+ {
+ period: "Jan 17, 2026 to Jan 30, 2026",
+ cutoff: "Feb 03, 2026 05:29:59 AM",
+ payDate: "Feb 06, 2026"
+ },
+ {
+ period: "Jan 31, 2026 to Feb 13, 2026",
+ cutoff: "Feb 17, 2026 05:29:59 AM",
+ payDate: "Feb 20, 2026"
+ },
+ {
+ period: "Feb 14, 2026 to Feb 27, 2026",
+ cutoff: "Mar 03, 2026 05:29:59 AM",
+ payDate: "Mar 06, 2026"
+ },
+ {
+ period: "Feb 28, 2026 to Mar 13, 2026",
+ cutoff: "Mar 17, 2026 05:29:59 AM",
+ payDate: "Mar 20, 2026"
+ }
+ ];
+
+ return (
+ <>
+
+ {/* Header */}
+
+
Schedules
+
+
+
+
+ {/* ⭐ FIXED: Horizontal scroll wrapper */}
+
+
+
+
+ | # |
+ Period |
+ Cutoff Time |
+ Pay Date |
+
+
+
+
+ {rows.map((row, index) => (
+
+ | {index + 1} |
+ {row.period} |
+
+ {row.cutoff}
+
+ (Asia/Calcutta)
+ |
+ {row.payDate} |
+
+ ))}
+
+
+
+
+
+
+
+ );
+};
+
+export default Schedule;