@argusoft/medplat-app-shell 1.0.5 → 1.0.7

package/src/common/HolidayList.jsx

@@ -0,0 +1,573 @@
+import React, { useState } from 'react';
+import {
+  Box,
+  Typography,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Tabs,
+  Tab,
+  Container,
+  Chip,
+  Fade,
+} from '@mui/material';
+import { motion } from 'framer-motion';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCalendarDays, faCircleInfo, faBuildingColumns } from '@fortawesome/free-solid-svg-icons';
+import PropTypes from 'prop-types';
+
+const generalHolidays2026 = [
+  { id: 1, name: 'Makar Sankranti', date: '14th January, 2026', day: 'Wednesday', type: 'General' },
+  { id: 2, name: 'Republic Day', date: '26th January, 2026', day: 'Monday', type: 'General' },
+  { id: 3, name: 'Holi 2nd Day - Dhuleti', date: '04th March, 2026', day: 'Wednesday', type: 'General' },
+  { id: 4, name: 'Chetichand', date: '19th March, 2026', day: 'Thursday', type: 'General' },
+  {
+    id: 5,
+    name: 'Ramjan-Eid (Eid-Ul-Fitra) (1st Shawaal)',
+    date: '21st March, 2026',
+    day: 'Saturday',
+    type: 'General',
+  },
+  { id: 6, name: 'Shree Ram Navmi', date: '26th March, 2026', day: 'Thursday', type: 'General' },
+  { id: 7, name: 'Mahavir Janma Kalyanak', date: '31st March, 2026', day: 'Tuesday', type: 'General' },
+  { id: 8, name: 'Good Friday', date: '3rd April, 2026', day: 'Friday', type: 'General' },
+  { id: 9, name: "Dr. Baba Saheb Ambedkar's Birthday", date: '14th April, 2026', day: 'Tuesday', type: 'General' },
+  { id: 10, name: 'Eid-Ul-Adha (Bakri-Eid)', date: '27th May, 2026', day: 'Wednesday', type: 'General' },
+  { id: 11, name: 'Muharram (Ashoora)', date: '26th June, 2026', day: 'Friday', type: 'General' },
+  {
+    id: 12,
+    name: 'Independence Day / Parsi New Year Day- Pateti (Parsi Shahenshahi)',
+    date: '15th August, 2026',
+    day: 'Saturday',
+    type: 'General',
+  },
+  {
+    id: 13,
+    name: "Eid-e-Meeladunnabi - (Prophet Mohammad's Birthday) (bara vafat)",
+    date: '26th August, 2026',
+    day: 'Wednesday',
+    type: 'General',
+  },
+  { id: 14, name: 'Raksha Bandhan', date: '28th August, 2026', day: 'Friday', type: 'General' },
+  { id: 15, name: 'Janmashtami (Shravan Vad-8)', date: '04th September, 2026', day: 'Friday', type: 'General' },
+  { id: 16, name: 'Samvatsari (Chaturthi Paksha)', date: '15th September, 2026', day: 'Tuesday', type: 'General' },
+  { id: 17, name: "Mahatma Gandhi's Birthday", date: '02nd October, 2026', day: 'Friday', type: 'General' },
+  { id: 18, name: 'Dusshera (Vijaya Dashmi)', date: '20th October, 2026', day: 'Tuesday', type: 'General' },
+  { id: 19, name: "Sardar Vallabhbhai Patel's Birthday", date: '31st October, 2026', day: 'Saturday', type: 'General' },
+  { id: 20, name: 'Vikram Samvant New Year Day', date: '10th November, 2026', day: 'Tuesday', type: 'General' },
+  { id: 21, name: 'Bhai Bij', date: '11th November, 2026', day: 'Wednesday', type: 'General' },
+  { id: 22, name: "Guru Nanak's Birthday", date: '24th November, 2026', day: 'Tuesday', type: 'General' },
+  { id: 23, name: 'Christmas', date: '25th December, 2026', day: 'Friday', type: 'General' },
+];
+
+const sundayGeneralHolidays2026 = [
+  { id: 24, name: 'Maha Shivratri (Maha vad-13)', date: '15th February, 2026', day: 'Sunday', type: 'Weekend' },
+  { id: 25, name: 'Bhagvan Shree Parshuram Jayanti', date: '19th April, 2026', day: 'Sunday', type: 'Weekend' },
+  { id: 26, name: 'Diwali', date: '08th November, 2026', day: 'Sunday', type: 'Weekend' },
+];
+
+const bankHolidays2026 = [
+  { id: 1, name: 'Makar Sankranti', date: '14th January, 2026', day: 'Wednesday', type: 'Bank' },
+  { id: 2, name: 'Republic Day', date: '26th January, 2026', day: 'Monday', type: 'Bank' },
+  { id: 3, name: 'Holi 2nd Day - Dhuleti', date: '04th March, 2026', day: 'Wednesday', type: 'Bank' },
+  { id: 4, name: 'Ramjan-Eid (Eid-Ul-Fitra) (1st Shawwal)', date: '21st March, 2026', day: 'Saturday', type: 'Bank' },
+  { id: 5, name: 'Shree Ram Navmi', date: '26th March, 2026', day: 'Thursday', type: 'Bank' },
+  { id: 6, name: 'Mahavir Janma Kalyanak', date: '31st March, 2026', day: 'Tuesday', type: 'Bank' },
+  { id: 7, name: 'Good Friday', date: '03rd April, 2026', day: 'Friday', type: 'Bank' },
+  { id: 8, name: "Dr. Baba Saheb Ambedkar's Birthday", date: '14th April, 2026', day: 'Tuesday', type: 'Bank' },
+  { id: 9, name: 'Eid-Ul-Adha (Bakri-Eid)', date: '27th May, 2026', day: 'Wednesday', type: 'Bank' },
+  { id: 10, name: 'Independence Day', date: '15th August, 2026', day: 'Saturday', type: 'Bank' },
+  { id: 11, name: 'Raksha Bandhan', date: '28th August, 2026', day: 'Friday', type: 'Bank' },
+  { id: 12, name: 'Janmashtami (Shravan Vad-8)', date: '04th September, 2026', day: 'Friday', type: 'Bank' },
+  { id: 13, name: 'Samvatsari (Chaturthi Paksha)', date: '15th September, 2026', day: 'Tuesday', type: 'Bank' },
+  { id: 14, name: "Mahatma Gandhi's Birthday", date: '02nd October, 2026', day: 'Friday', type: 'Bank' },
+  { id: 15, name: 'Dusshera (Vijaya Dashmi) (Aaso sud-10)', date: '20th October, 2026', day: 'Tuesday', type: 'Bank' },
+  { id: 16, name: "Sardar Vallabhbhai Patel's Birthday", date: '31st October, 2026', day: 'Saturday', type: 'Bank' },
+  { id: 17, name: 'Vikram Samvant New Year Day', date: '10th November, 2026', day: 'Tuesday', type: 'Bank' },
+  { id: 18, name: 'Christmas', date: '25th December, 2026', day: 'Friday', type: 'Bank' },
+];
+
+const sundayBankHolidays2026 = [
+  { id: 19, name: 'Maha Shivratri (Maha vad-13)', date: '15th February, 2026', day: 'Sunday', type: 'Sunday' },
+  { id: 20, name: 'Bhagvan Shree Parshuram Jayanti', date: '19th April, 2026', day: 'Sunday', type: 'Sunday' },
+  { id: 21, name: 'Diwali', date: '08th November, 2026', day: 'Sunday', type: 'Sunday' },
+];
+
+const specialBankHolidays2026 = [
+  { id: 22, name: 'Yearly Closing of Accounts', date: '01st April, 2026', day: 'Wednesday', type: 'Special' },
+];
+
+const optionalHolidays2026 = [
+  { id: 1, name: 'Christian New Year Day', date: '01st January, 2026', day: 'Thursday', type: 'Optional' },
+  {
+    id: 2,
+    name: 'Vassi Uttarayan (Next Day to Makar Sankranti)',
+    date: '15th January, 2026',
+    day: 'Thursday',
+    type: 'Optional',
+  },
+  { id: 3, name: 'Vishvakarma Jayanti (Maha Sud-13)', date: '31st January, 2026', day: 'Saturday', type: 'Optional' },
+  {
+    id: 4,
+    name: 'Shab-e-Barat / Birthday of Dhani Matang Dev',
+    date: '04th February, 2026',
+    day: 'Wednesday',
+    type: 'Optional',
+  },
+  { id: 5, name: 'Holi', date: '03rd March, 2026', day: 'Tuesday', type: 'Optional' },
+  { id: 6, name: 'Shahadat-e-Hazarat Ali', date: '11th March, 2026', day: 'Wednesday', type: 'Optional' },
+  { id: 7, name: 'Gudi Padvo (Chaitra Sud-1)', date: '19th March, 2026', day: 'Thursday', type: 'Optional' },
+  { id: 8, name: 'Jamshedi Navroz', date: '21st March, 2026', day: 'Saturday', type: 'Optional' },
+  { id: 9, name: 'Hatkeshvar Jayanti', date: '01st April, 2026', day: 'Wednesday', type: 'Optional' },
+  {
+    id: 10,
+    name: 'Hanuman Jayanti (Chaitra Sud-15) / Pesah (1st Day)',
+    date: '02nd April, 2026',
+    day: 'Thursday',
+    type: 'Optional',
+  },
+  { id: 11, name: "Maha Prabhuji's Praktyotsava", date: '13th April, 2026', day: 'Monday', type: 'Optional' },
+  {
+    id: 12,
+    name: 'Shree Adhya Jagadguru Shankaracharya Jayanti',
+    date: '21st April, 2026',
+    day: 'Tuesday',
+    type: 'Optional',
+  },
+  { id: 13, name: 'Zarthost-no-Disho (Parsi Kadami)', date: '22nd April, 2026', day: 'Wednesday', type: 'Optional' },
+  { id: 14, name: 'Budhha Purnima (Vaishakh Sud-15)', date: '01st May, 2026', day: 'Friday', type: 'Optional' },
+  {
+    id: 15,
+    name: 'Zarthost-no-Disho (Parsi Shahenshahi) / Shavuoth',
+    date: '22nd May, 2026',
+    day: 'Friday',
+    type: 'Optional',
+  },
+  { id: 16, name: "Guru Arjundev's Martyrdom day", date: '18th June, 2026', day: 'Thursday', type: 'Optional' },
+  { id: 17, name: '9th Muharram', date: '25th June, 2026', day: 'Thursday', type: 'Optional' },
+  {
+    id: 18,
+    name: 'Gatha Gahamber (Gatha-III) (Parsi Kadmi)',
+    date: '13th July, 2026',
+    day: 'Monday',
+    type: 'Optional',
+  },
+  {
+    id: 19,
+    name: 'Parsi New Year Day Eve (Gatha-V) (Parsi kadmi)',
+    date: '15th July, 2026',
+    day: 'Wednesday',
+    type: 'Optional',
+  },
+  {
+    id: 20,
+    name: 'Rathayatra (Ashadh Sud-2) / Parsi New Year Day (Parsi Kadmi)',
+    date: '16th July, 2026',
+    day: 'Thursday',
+    type: 'Optional',
+  },
+  { id: 21, name: 'Khordad Sal (Parsi Kadmi)', date: '21st July, 2026', day: 'Tuesday', type: 'Optional' },
+  { id: 22, name: 'Tisha-be-aav (Yahudi)', date: '23rd July, 2026', day: 'Thursday', type: 'Optional' },
+  {
+    id: 23,
+    name: 'Gatha Gahamber (Gatha-III) / Shahadat-e- Imam Hasan',
+    date: '12th August, 2026',
+    day: 'Wednesday',
+    type: 'Optional',
+  },
+  {
+    id: 24,
+    name: 'Parsi New Year Day Eve (Gatha-V) (Parsi Shahenshahi)',
+    date: '14th August, 2026',
+    day: 'Friday',
+    type: 'Optional',
+  },
+  { id: 25, name: 'Khordad Sal (Parsi Shahenshahi)', date: '20th August, 2026', day: 'Thursday', type: 'Optional' },
+  { id: 26, name: 'Onam', date: '26th August, 2026', day: 'Wednesday', type: 'Optional' },
+  { id: 27, name: 'Id-e-Maulud', date: '31st August, 2026', day: 'Monday', type: 'Optional' },
+  { id: 28, name: 'Nand Utsav (Shravan Vad-9)', date: '05th September, 2026', day: 'Saturday', type: 'Optional' },
+  {
+    id: 29,
+    name: 'Shravan Vad-12 (Paryusan 1st Day) (Chaturthi Paksha)',
+    date: '08th September, 2026',
+    day: 'Tuesday',
+    type: 'Optional',
+  },
+  {
+    id: 30,
+    name: 'Shravan Vad-13 (Paryusan 1st Day) (Panchami Paksha)',
+    date: '09th September, 2026',
+    day: 'Wednesday',
+    type: 'Optional',
+  },
+  { id: 31, name: 'Ganesh Chaturthi (Bhadarva Sud-4)', date: '14th September, 2026', day: 'Monday', type: 'Optional' },
+  { id: 32, name: 'Samvatsari (Panchami Paksha)', date: '16th September, 2026', day: 'Wednesday', type: 'Optional' },
+  { id: 33, name: 'Yom Kippur (Yahudi)', date: '21st September, 2026', day: 'Monday', type: 'Optional' },
+  { id: 34, name: 'Dhan Terash (Aaso Vad- 13)', date: '07th November, 2026', day: 'Saturday', type: 'Optional' },
+  { id: 35, name: 'Dev-Diwali (Kartak Sud-15)', date: '24th November, 2026', day: 'Tuesday', type: 'Optional' },
+];
+
+const sundayOptionalHolidays2026 = [
+  { id: 36, name: "Saint Shiromani Ravidasji's Birthday", date: '01st February, 2026', day: 'Sunday', type: 'Weekend' },
+  { id: 37, name: 'Ramjan-Id (Eid-Ul-Fitra) (2nd Shawaal)', date: '22nd March, 2026', day: 'Sunday', type: 'Weekend' },
+  {
+    id: 38,
+    name: "International Day of the World's Indigenous Peoples",
+    date: '09th August, 2026',
+    day: 'Sunday',
+    type: 'Weekend',
+  },
+  {
+    id: 39,
+    name: 'Rosh Hashanah / Mahavir Swami Janma Vachan',
+    date: '12th September, 2026',
+    day: '2nd Saturday',
+    type: 'Weekend',
+  },
+  { id: 40, name: 'Eve of Kippur (Yahudi)', date: '20th September, 2026', day: 'Sunday', type: 'Weekend' },
+  { id: 41, name: 'Succoth (Yahudi)', date: '26th September, 2026', day: '4th Saturday', type: 'Weekend' },
+  { id: 42, name: 'Kali Chaudash (Aaso Vad-14)', date: '08th November, 2026', day: 'Sunday', type: 'Weekend' },
+  { id: 43, name: 'Shrimad Bhagwad Gita Jayanti', date: '20th December, 2026', day: 'Sunday', type: 'Weekend' },
+  {
+    id: 44,
+    name: 'Boxing Day (Next Day to Christmas)',
+    date: '26th December, 2026',
+    day: '4th Saturday',
+    type: 'Weekend',
+  },
+];
+
+const HolidayList = () => {
+  const [tabValue, setTabValue] = useState(0);
+
+  const handleTabChange = (event, newValue) => {
+    setTabValue(newValue);
+  };
+
+  const allGeneralHolidays = [...generalHolidays2026, ...sundayGeneralHolidays2026].sort((a, b) => a.id - b.id);
+  const allBankHolidays = [...bankHolidays2026, ...sundayBankHolidays2026, ...specialBankHolidays2026].sort(
+    (a, b) => a.id - b.id
+  );
+  const allOptionalHolidays = [...optionalHolidays2026, ...sundayOptionalHolidays2026].sort((a, b) => a.id - b.id);
+
+  return (
+    <Container maxWidth="lg" sx={{ py: { xs: 2, md: 4 }, px: { xs: 1, sm: 2, md: 3 }, minHeight: '100vh' }}>
+      <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
+        <Box sx={{ mb: { xs: 2, md: 4 }, textAlign: 'center' }}>
+          <Typography
+            variant="h4"
+            component="h1"
+            sx={{
+              fontWeight: 800,
+              color: '#1a237e',
+              mb: 1,
+              letterSpacing: '-0.02em',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: { xs: 1, md: 2 },
+              fontSize: { xs: '1.75rem', sm: '2.25rem', md: '3rem' },
+              flexWrap: 'wrap',
+            }}
+          >
+            <FontAwesomeIcon icon={faCalendarDays} style={{ fontSize: '0.8em', color: '#3f51b5' }} />
+            Holiday List 2026
+          </Typography>
+          <Typography
+            variant="body1"
+            sx={{ color: 'text.secondary', fontWeight: 500, fontSize: { xs: '0.875rem', md: '1rem' } }}
+          >
+            Official General, Bank and Optional Holidays for the Year 2026
+          </Typography>
+        </Box>
+      </motion.div>
+
+      <Box sx={{ mb: { xs: 3, md: 4 }, display: 'flex', justifyContent: 'center' }}>
+        <Paper
+          elevation={0}
+          sx={{
+            p: 0.5,
+            borderRadius: { xs: 2, md: 4 },
+            bgcolor: 'rgba(236, 239, 241, 0.7)',
+            backdropFilter: 'blur(10px)',
+            display: 'inline-flex',
+            maxWidth: '100%',
+            overflow: 'hidden',
+          }}
+        >
+          <Tabs
+            value={tabValue}
+            onChange={handleTabChange}
+            variant="scrollable"
+            scrollButtons="auto"
+            allowScrollButtonsMobile
+            sx={{
+              minHeight: { xs: 40, md: 48 },
+              '& .MuiTabs-indicator': {
+                height: '100%',
+                borderRadius: { xs: 1.5, md: 3 },
+                bgcolor: '#fff',
+                boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
+                zIndex: 0,
+              },
+              '& .MuiTab-root': {
+                minHeight: { xs: 40, md: 48 },
+                borderRadius: { xs: 1.5, md: 3 },
+                zIndex: 1,
+                fontWeight: 600,
+                px: { xs: 1.5, sm: 2, md: 3 },
+                mx: 0.25,
+                fontSize: { xs: '0.75rem', sm: '0.875rem', md: '1rem' },
+                transition: 'all 0.2s',
+                '&.Mui-selected': { color: '#1a237e' },
+              },
+            }}
+          >
+            <Tab label="General" />
+            <Tab label="Bank" />
+            <Tab label="Optional" />
+          </Tabs>
+        </Paper>
+      </Box>
+
+      <Box sx={{ width: '100%', overflow: 'hidden' }}>
+        {/* General Holidays Tab */}
+        {tabValue === 0 && (
+          <Fade in={tabValue === 0}>
+            <Box role="tabpanel">
+              <HolidayTable
+                data={allGeneralHolidays}
+                note="These public holidays are applicable to all State Government Offices, Undertakings, Boards, and Panchayats in Gujarat."
+              />
+            </Box>
+          </Fade>
+        )}
+
+        {/* Bank Holidays Tab */}
+        {tabValue === 1 && (
+          <Fade in={tabValue === 1}>
+            <Box role="tabpanel">
+              <HolidayTable
+                data={allBankHolidays}
+                note="The holidays mentioned above are notified by the Government of Gujarat as Public Holidays for Banks during the year 2026."
+              />
+            </Box>
+          </Fade>
+        )}
+
+        {/* Optional Holidays Tab */}
+        {tabValue === 2 && (
+          <Fade in={tabValue === 2}>
+            <Box role="tabpanel">
+              <HolidayTable
+                data={allOptionalHolidays}
+                note="Government Employees may avail of maximum any two of the holidays on the festival occasions mentioned above at their option."
+              />
+            </Box>
+          </Fade>
+        )}
+      </Box>
+    </Container>
+  );
+};
+
+const HolidayTable = ({ data, note }) => (
+  <Box sx={{ width: '100%' }}>
+    <TableContainer
+      component={Paper}
+      elevation={10}
+      sx={{
+        borderRadius: { xs: 3, md: 5 },
+        overflowX: 'auto', // Explicit horizontal scroll
+        border: '1px solid rgba(255,255,255,0.3)',
+        boxShadow: '0 20px 40px rgba(0,0,0,0.05)',
+        '&::-webkit-scrollbar': {
+          height: '6px',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          backgroundColor: 'rgba(0,0,0,0.1)',
+          borderRadius: '10px',
+        },
+      }}
+    >
+      <Table sx={{ minWidth: { xs: 600, md: 800 } }}>
+        <TableHead>
+          <TableRow sx={{ bgcolor: '#f5f7fa' }}>
+            <TableCell
+              sx={{
+                fontWeight: 700,
+                color: '#546e7a',
+                py: { xs: 1.5, md: 2.5 },
+                fontSize: { xs: '0.75rem', md: '0.875rem' },
+              }}
+            >
+              Sr.
+            </TableCell>
+            <TableCell sx={{ fontWeight: 700, color: '#546e7a', fontSize: { xs: '0.75rem', md: '0.875rem' } }}>
+              Name of Holiday
+            </TableCell>
+            <TableCell sx={{ fontWeight: 700, color: '#546e7a', fontSize: { xs: '0.75rem', md: '0.875rem' } }}>
+              Date
+            </TableCell>
+            <TableCell sx={{ fontWeight: 700, color: '#546e7a', fontSize: { xs: '0.75rem', md: '0.875rem' } }}>
+              Day
+            </TableCell>
+            <TableCell
+              sx={{
+                fontWeight: 700,
+                color: '#546e7a',
+                textAlign: 'center',
+                fontSize: { xs: '0.75rem', md: '0.875rem' },
+              }}
+            >
+              Category
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map((holiday, index) => (
+            <TableRow
+              key={holiday.id}
+              hover
+              sx={{
+                '&:last-child td, &:last-child th': { border: 0 },
+                bgcolor: holiday.type === 'Sunday' || holiday.day === 'Sunday' ? 'rgba(255, 235, 238, 0.3)' : 'inherit',
+                transition: 'background-color 0.2s',
+              }}
+            >
+              <TableCell sx={{ fontWeight: 600, color: '#78909c', fontSize: { xs: '0.75rem', md: '0.875rem' } }}>
+                {index + 1}
+              </TableCell>
+              <TableCell sx={{ fontWeight: 600, color: '#263238', fontSize: { xs: '0.75rem', md: '0.875rem' } }}>
+                {holiday.name}
+              </TableCell>
+              <TableCell
+                sx={{
+                  color: '#455a64',
+                  fontWeight: 500,
+                  fontSize: { xs: '0.75rem', md: '0.875rem' },
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {holiday.date}
+              </TableCell>
+              <TableCell
+                sx={{
+                  color: holiday.day === 'Sunday' || holiday.day.includes('Sunday') ? '#d32f2f' : '#455a64',
+                  fontWeight: 600,
+                  fontSize: { xs: '0.75rem', md: '0.875rem' },
+                }}
+              >
+                {holiday.day}
+              </TableCell>
+              <TableCell sx={{ textAlign: 'center' }}>
+                <Chip
+                  label={holiday.type}
+                  size="small"
+                  sx={{
+                    fontWeight: 700,
+                    fontSize: { xs: '0.65rem', md: '0.75rem' },
+                    height: { xs: 20, md: 24 },
+                    borderRadius: '8px',
+                    bgcolor:
+                      holiday.type === 'Bank' || holiday.type === 'General' || holiday.type === 'Optional'
+                        ? '#e8eaf6'
+                        : holiday.type === 'Sunday' || holiday.type === 'Weekend'
+                          ? '#ffebee'
+                          : '#e0f2f1',
+                    color:
+                      holiday.type === 'Bank' || holiday.type === 'General' || holiday.type === 'Optional'
+                        ? '#3f51b5'
+                        : holiday.type === 'Sunday' || holiday.type === 'Weekend'
+                          ? '#c62828'
+                          : '#00695c',
+                    textTransform: 'uppercase',
+                  }}
+                />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+
+    <Box
+      sx={{
+        mt: 3,
+        p: { xs: 2, md: 3 },
+        borderRadius: 4,
+        bgcolor: '#fff9c4',
+        border: '1px dashed #fbc02d',
+        display: 'flex',
+        gap: 2,
+        alignItems: 'center',
+      }}
+    >
+      <FontAwesomeIcon icon={faCircleInfo} style={{ color: '#fbc02d', fontSize: '1.2rem' }} />
+      <Box>
+        <Typography
+          variant="body2"
+          sx={{ fontWeight: 700, color: '#827717', fontSize: { xs: '0.75rem', md: '0.875rem' } }}
+        >
+          Note:
+        </Typography>
+        <Typography variant="body2" sx={{ color: '#827717', fontSize: { xs: '0.75rem', md: '0.875rem' } }}>
+          {note} Holidays falling on Sundays or specified Saturdays have not been separately notified.
+        </Typography>
+      </Box>
+    </Box>
+  </Box>
+);
+
+HolidayTable.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      date: PropTypes.string.isRequired,
+      day: PropTypes.string.isRequired,
+      type: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+  note: PropTypes.string.isRequired,
+};
+
+const PlaceholderView = ({ title, description }) => (
+  <Paper
+    elevation={0}
+    sx={{
+      p: { xs: 4, md: 8 },
+      borderRadius: 5,
+      textAlign: 'center',
+      bgcolor: 'rgba(255, 255, 255, 0.5)',
+      border: '2px dashed #cfd8dc',
+    }}
+  >
+    <Box sx={{ mb: 3 }}>
+      <FontAwesomeIcon icon={faBuildingColumns} style={{ fontSize: { xs: '2.5rem', md: '4rem' }, color: '#cfd8dc' }} />
+    </Box>
+    <Typography
+      variant="h5"
+      sx={{ fontWeight: 700, color: '#90a4ae', mb: 1, fontSize: { xs: '1.25rem', md: '1.5rem' } }}
+    >
+      {title}
+    </Typography>
+    <Typography
+      variant="body1"
+      sx={{ color: '#b0bec5', maxWidth: 400, mx: 'auto', fontSize: { xs: '0.875rem', md: '1rem' } }}
+    >
+      {description}
+    </Typography>
+  </Paper>
+);
+
+PlaceholderView.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+};
+
+export default HolidayList;

package/src/common/MalaciaousInputUtil.js

@@ -0,0 +1,23 @@
+import DOMPurify from 'dompurify';
+
+// securityUtils.ts
+export const containsMaliciousPattern = (value) => {
+  const maliciousPatterns = [
+    /<script.*?>.*?<\/script>/gi,
+    /<iframe.*?>.*?<\/iframe>/gi,
+    /on\w+=/gi,
+    /javascript:/gi,
+    /<.*?>/g,
+  ];
+
+  return maliciousPatterns.some((pattern) => pattern.test(value));
+};
+
+export const sanitizeRichText = (html) => {
+  return DOMPurify.sanitize(html, {
+    ALLOWED_TAGS: ['b', 'i', 'u', 'strong', 'em', 'p', 'br', 'ul', 'ol', 'li', 'span'],
+    ALLOWED_ATTR: [],
+    FORBID_TAGS: ['a', 'script', 'iframe'],
+    FORBID_ATTR: ['onclick', 'onerror', 'style'],
+  });
+};

package/src/common/SafeHtml.jsx

@@ -0,0 +1,17 @@
+
+import DOMPurify from 'dompurify';
+import PropTypes from 'prop-types';
+
+const SafeHtml = ({ html }) => {
+  const cleanHtml = DOMPurify.sanitize(html, {
+    USE_PROFILES: { html: true },
+    FORBID_TAGS: ['style', 'iframe', 'object', 'embed'],
+    FORBID_ATTR: ['onerror', 'onclick', 'onload'],
+  });
+
+  return <span dangerouslySetInnerHTML={{ __html: cleanHtml }} />;
+};
+SafeHtml.propTypes = {
+  html: PropTypes.any,
+};
+export default SafeHtml;