Merge branch 'main' of https://git.7o9o.net/md.asif5/osaka

Remove commented dark color variants from primary and secondary color configurations in Tailwind CSS
changed some styles
2024-12-21 17:26:58 +05:30 · 2024-12-02 20:22:31 +05:30 · 2024-11-22 15:03:08 +05:30 · 2024-10-05 00:51:00 +05:30 · 2024-10-05 00:19:34 +05:30 · 2024-10-05 00:07:06 +05:30
20 changed files with 140 additions and 99 deletions
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/ipks_logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>IPKS | Development</title>
  </head>
  <body>
    <div id="root"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,14 @@
 {
-  "name": "my-project",
+  "name": "osaka",
  "version": "0.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
-      "name": "my-project",
+      "name": "osaka",
      "version": "0.0.0",
      "dependencies": {
+        "clsx": "^2.1.1",
        "i18next": "^23.15.1",
        "i18next-browser-languagedetector": "^8.0.0",
        "i18next-http-backend": "^2.6.1",
@@ -1907,6 +1908,14 @@
        "node": ">= 6"
      }
    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/color-convert": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "clsx": "^2.1.1",
    "i18next": "^23.15.1",
    "i18next-browser-languagedetector": "^8.0.0",
    "i18next-http-backend": "^2.6.1",
--- a/public/ipks_logo.svg
+++ b/public/ipks_logo.svg
--- a/public/locales/bn/translation.json
+++ b/public/locales/bn/translation.json
@@ -40,10 +40,11 @@
    "notifications": "বিজ্ঞপ্তি",
    "holidayList": "ছুটির তালিকা",
    "information": "তথ্য",
-    "hpn_complete_before_31": "অনুগ্রহ করে ৩১শে মার্চের সমস্ত লেনদেন ২১:০০ ঘটিকার আগে সম্পন্ন করুন",
-    "hpn_npa": "আগামী ৩১শে মার্চ ২১:০০ ঘটিকার আগে ঋণ এনপিএ রিপোর্ট থেকে প্রস্তাবিত এনপিএ স্থিতি যাচাই করার পরে প্রযোজ্য ঋণ অ্যাকাউন্টের জন্য এনপিএ চিহ্নিত/অচিহ্নিত করুন",
-    "hpn_helpdesk_contact": "ফোনে সমস্যার সমাধানের জন্য আমাদের সাথে যোগাযোগ করুন 033-4065-9546 / 4071-8135 (সকাল ৯:০০ থেকে রাত ৯:০০ পর্যন্ত)",
-    "hpn_rupay_kcc_time": "সমস্ত রূপে কিসান ক্রেডিট কার্ড লেনদেন ১৯:০০ ঘটিকার আগে সম্পন্ন করুন",
-    "hpn_rupay_kcc_atm": "কিছু অভ্যন্তরীণ পরিবর্তনের কারণে, মাইক্রো-এটিএম এর মাধ্যমে রূপে কিসান ক্রেডিট কার্ড কার্যক্রম বন্ধ করা হয়েছে। সেবা আগামীকাল থেকে পুনরায় চালু হবে।"
-
+    "hpn_complete_before_31": "অনুগ্রহ করে ৩১শে মার্চের সমস্ত লেনদেন ২১:00 ঘটিকার আগে সম্পন্ন করুন",
+    "hpn_npa": "আগামী ৩১শে মার্চ ২১:00  ঘটিকার আগে ঋণ এনপিএ রিপোর্ট থেকে প্রস্তাবিত এনপিএ স্থিতি যাচাই করার পরে প্রযোজ্য ঋণ অ্যাকাউন্টের জন্য এনপিএ চিহ্নিত/অচিহ্নিত করুন",
+    "hpn_helpdesk_contact": "ফোনে সমস্যার সমাধানের জন্য আমাদের সাথে যোগাযোগ করুন 033-4065-9546 / 4071-8135 (সকাল ৯:00 থেকে রাত ৯:00 পর্যন্ত)",
+    "hpn_rupay_kcc_time": "সমস্ত রূপে কিসান ক্রেডিট কার্ড লেনদেন ১৯:00 ঘটিকার আগে সম্পন্ন করুন",
+    "hpn_rupay_kcc_atm": "কিছু অভ্যন্তরীণ পরিবর্তনের কারণে, মাইক্রো-এটিএম এর মাধ্যমে রূপে কিসান ক্রেডিট কার্ড কার্যক্রম বন্ধ করা হয়েছে। সেবা আগামীকাল থেকে পুনরায় চালু হবে।",
+    "copyright_statement": "কপিরাইট © ২০২৩, টাটা কনসাল্টেন্সি সার্ভিসেস। সমস্ত অধিকার সংরক্ষিত",
+    "privacy_policy": "গোপনীয়তা নীতি"
 }
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -45,5 +45,7 @@
    "hpn_npa": "Do Mark/Unmark NPA for applicable loan accounts after verifying suggestive NPA status from loan NPA reports before upcoming 31st March 21:00 Hrs",
    "hpn_helpdesk_contact": "For on call issue resolution reach us at 033-4065-9546 / 4071-8135 (9:00 AM to 9:00 PM)",
    "hpn_rupay_kcc_time": "Complete all Rupay KCC transactions before 19:00 Hrs", 
-    "hpn_rupay_kcc_atm": "Due to some internal changes, Rupay KCC Operations through Micro-ATM has been stopped. The service will resume starting tomorrow."
+    "hpn_rupay_kcc_atm": "Due to some internal changes, Rupay KCC Operations through Micro-ATM has been stopped. The service will resume starting tomorrow.",
+    "copyright_statement": "Copyright © 2023, Tata Consultancy Services. All rights reserved",
+    "privacy_policy": "Privacy Policy"
 }
--- a/public/locales/hi/translation.json
+++ b/public/locales/hi/translation.json
@@ -45,6 +45,7 @@
    "hpn_npa": "कृपया आगामी 31 मार्च 21:00 बजे से पहले ऋण एनपीए रिपोर्ट से सुझावित एनपीए स्थिति की जांच के बाद संबंधित ऋण खातों के लिए एनपीए को चिह्नित/अचिह्नित करें",
    "hpn_helpdesk_contact": "किसी भी समस्या के समाधान के लिए हमें 033-4065-9546 / 4071-8135 (सुबह 9:00 से रात 9:00 बजे तक) पर संपर्क करें",
    "hpn_rupay_kcc_time": "सभी रुपे केसीसी लेनदेन 19:00 बजे से पहले पूरा करें",
-    "hpn_rupay_kcc_atm": "कुछ आंतरिक बदलावों के कारण, माइक्रो-एटीएम के माध्यम से रुपे केसीसी संचालन बंद कर दिया गया है। सेवा कल से फिर से शुरू होगी।"
-
+    "hpn_rupay_kcc_atm": "कुछ आंतरिक बदलावों के कारण, माइक्रो-एटीएम के माध्यम से रुपे केसीसी संचालन बंद कर दिया गया है। सेवा कल से फिर से शुरू होगी।",
+    "copyright_statement": "कॉपीराइट © 2023, टाटा कंसल्टेंसी सर्विसेज। सभी अधिकार सुरक्षित",
+    "privacy_policy": "गोपनीयता नीति"
 }
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,7 +5,7 @@ import Footer from "./components/Footer"
 function App() {
  return <div className="flex flex-col min-h-screen">
    <Header />
-    <main className="flex transition-color-mode px-7 flex-grow bg-surface dark:bg-surface-dark">
+    <main className="flex flex-grow transition-color-mode md:p-7 2xl:p-12 bg-surface dark:bg-surface-dark">
      <Outlet />
    </main>
    <Footer />
--- a/src/components/AppTitle.jsx
+++ b/src/components/AppTitle.jsx
@@ -8,9 +8,9 @@ function AppTitle() {
  const { t } = useTranslation();
  return (
    <div className='flex items-center justify-between pt-3 pb-5'>
-        <div className='flex gap-5 items-center'>
+        <div className='flex items-center gap-5'>
            <img src={IpksLogo} alt="IPKS Logo" className="h-16" />
-            <h1 className="text-title font-display font-bold">{t('appName')}</h1>
+            <h1 className="font-bold text-title font-display">{t('appName')}</h1>
        </div>
        <div className='flex items-center gap-2'>
          <DarkModeToggle />
--- a/src/components/DarkModeToggle.jsx
+++ b/src/components/DarkModeToggle.jsx
@@ -22,9 +22,8 @@ const DarkModeToggle = () => {

  return (
    <button
+      className="p-2 text-gray-800 transition-colors duration-200 bg-gray-200 rounded-full"
      onClick={toggleDarkMode}
-      className="p-2 rounded-full bg-gray-200 text-gray-800 transition-colors duration-200"
-      data-theme={darkMode ? 'dark' : 'light'}
      aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
    >
      {darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,7 +1,11 @@
+import { useTranslation } from 'react-i18next';
+
 function Footer() {
+  const { t } = useTranslation();
  return (
-    <footer>
-      <p>© 2021</p>
+    <footer className="flex justify-between p-2 text-sm px-7 font-body bg-tertiary text-primary dark:bg-tertiary-dark dark:text-primary-dark">
+      <p>{t('copyright_statement')}</p>
+      <a className="cursor-pointer">{t('privacy_policy')}</a>
    </footer>
  );
 }
--- a/src/components/FormBox.jsx
+++ b/src/components/FormBox.jsx
@@ -1,9 +1,12 @@
 import { PropTypes } from 'prop-types';
+import clsx from 'clsx';

-function FormBox({title, children}) {
+function FormBox({ title, children, alt = false }) {
  return (
-    <div className='transition-color-mode font-body bg-surface-variant border-secondary dark:bg-surface-variant-dark dark:border-primary-dark border-2 p-4 rounded-3xl relative h-full'>
-        <label className='font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full'>{title}</label>
+    <div className={clsx(alt ? 'bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark' : 'bg-surface-variant dark:bg-surface-variant-dark', 'transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full')}>
+      <label className={clsx(alt && 'bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark', 'font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full')}>
+        {title}
+      </label>
      {children}
    </div>
  );
@@ -11,7 +14,8 @@ function FormBox({title, children}) {

 FormBox.propTypes = {
  children: PropTypes.node.isRequired,
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  alt: PropTypes.bool,
 };

 export default FormBox;
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -11,38 +11,38 @@ function Header() {
    {
      name: "moduleList",
      submenu: [
-            {name: "kcc", path: "kcc"},
-            {name: "trading", path: "trading"},
-            {name: "asset", path: "asset"},
-            {name: "selfHelpGroup", path: "shg"},
-            {name: "deposit", path: "deposit"},
-            {name: "loan", path: "loan"},
-            {name: "share", path: "share"},
+        { name: "kcc", path: "kcc" },
+        { name: "trading", path: "trading" },
+        { name: "asset", path: "asset" },
+        { name: "selfHelpGroup", path: "shg" },
+        { name: "deposit", path: "deposit" },
+        { name: "loan", path: "loan" },
+        { name: "share", path: "share" },
      ],
    },
-        { name: "enquiry", submenu: [{name: "lockerEnquiry", path: "locker-enquiry"}, {name: "accountEnquiry", path: "account-enquiry"}] },
+    { name: "enquiry", submenu: [{ name: "lockerEnquiry", path: "locker-enquiry" }, { name: "accountEnquiry", path: "account-enquiry" }] },
    {
      name: "lockerOperation",
      submenu: [
-            {name: "accountCreation", path: "account-creation"},
-            {name: "cabinetMaintenance", path: "cabinet-maintenance"},
-            {name: "lockerMaintenance", path: "locker-maintenance"},
-            {name: "rentPenaltyCollection", path: "rent-collection"},
-            {name: "chargeManagement", path: "charge-management"},
-            {name: "checkInOutManagement", path: "check-in-out"},
-            {name: "accountSurrender", path: "account-surrender"}
+        { name: "accountCreation", path: "account-creation" },
+        { name: "cabinetMaintenance", path: "cabinet-maintenance" },
+        { name: "lockerMaintenance", path: "locker-maintenance" },
+        { name: "rentPenaltyCollection", path: "rent-collection" },
+        { name: "chargeManagement", path: "charge-management" },
+        { name: "checkInOutManagement", path: "check-in-out" },
+        { name: "accountSurrender", path: "account-surrender" }
      ],
    },
-        { name: "worklist", submenu: [{name:"myIntimation", path: "my-intimation"}] },
+    { name: "worklist", submenu: [{ name: "myIntimation", path: "my-intimation" }] },
    {
      name: "userManagement",
-          submenu: [{name: "resetLogin", path: "reset-login"}, {name: "changePassword", path: "change-password"}],
+      submenu: [{ name: "resetLogin", path: "reset-login" }, { name: "changePassword", path: "change-password" }],
    },
    { name: "logout", submenu: [] },
  ];

  return (
-        <div className="transition-color-mode px-7 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
+    <div className="px-12 transition-color-mode bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
      <AppTitle />
      <BannerInfo info={userInfo} />
      <Separator />
--- a/src/components/LanguageSelector.jsx
+++ b/src/components/LanguageSelector.jsx
@@ -9,7 +9,7 @@ const LanguageSelector = () => {

  return (
    <div>
-      <select className='font-body rounded-md bg-secondary dark:bg-secondary-dark' id="language-select" onChange={changeLanguage} value={i18n.language}>
+      <select className='rounded-md font-body bg-secondary dark:bg-secondary-dark focus:outline-none' id="language-select" onChange={changeLanguage} value={i18n.language}>
        <option value="en">English</option>
        <option value="bn">বাংলা</option>
        <option value="hi">हिन्दी</option>
--- a/src/components/MenuBar.jsx
+++ b/src/components/MenuBar.jsx
@@ -2,15 +2,12 @@ import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";

-const SubMenu = ({ items }) => {
-  const {t} = useTranslation();
+function SubMenu({ items }) {
+  const { t } = useTranslation();
  return (
-    <div className="
-      hidden  absolute top-full left-0 border-t-3 border-primary dark:border-primary-dark bg-secondary
-       dark:bg-secondary-dark rounded-2xl shadow-sm shadow-surface-variant-dark dark:shadow-primary group-hover:block z-10"
-    >
+    <div className="absolute left-0 z-50 invisible transition-all duration-200 -translate-y-6 shadow-sm opacity-0 top-full border-t-3 border-primary dark:border-primary-dark bg-secondary dark:bg-secondary-dark rounded-2xl shadow-surface-variant-dark dark:shadow-primary group-hover:visible group-hover:translate-y-0 group-hover:opacity-100">
      {items.map((subItem, index) => (
-        <div key={index} className="px-6 py-2 text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark cursor-pointer first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4">
+        <div key={index} className="px-6 py-2 cursor-pointer text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4">
          <Link to={subItem.path}>{t(subItem.name)}</Link>
        </div>
      ))}
@@ -22,11 +19,11 @@ const SubMenu = ({ items }) => {
 };

 function MenuBar({ menuItems }) {
-  const {t} = useTranslation();
+  const { t } = useTranslation();
  return (
-    <div className="flex justify-between text-base pt-5 pb-2 font-body">
+    <div className="flex justify-between pt-5 pb-2 text-base font-body">
      {menuItems.map((item, index) =>
-        <div key={index} className="group relative pb-3 cursor-pointer">
+        <div key={index} className="relative pb-3 cursor-pointer group">
          {t(item.name)}
          {item.submenu.length > 0 && <SubMenu items={item.submenu} />}
        </div>
--- a/src/components/Separator.jsx
+++ b/src/components/Separator.jsx
@@ -1,7 +1,7 @@
 function Separator() {
  return (
    <div className="h-[2px]">
-        <div className="h-full w-full bg-white dark:bg-primary rounded-md"></div>
+      <div className="w-full h-full bg-white rounded-md dark:bg-primary-dark"></div>
    </div>
  )
 }
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -9,7 +9,7 @@ i18n
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
-    interpolation: { escapeValue: false},
+    interpolation: { escapeValue: false },
    debug: true,
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -9,23 +9,23 @@ function Home() {
  const userInformation = getUserInfoFromSession();

  return (
-    <div className="py-7 flex flex-grow gap-7">
-      <div className="flex gap-7 flex-col basis-1/3">
+    <div className="flex flex-grow gap-7">
+      <div className="flex flex-col gap-7 basis-1/3">
        <div className="flex-grow">
-          <FormBox title={t('holidayList')}>
-            <ul className="list-inside list-disc px-4">
+          <FormBox title={t('holidayList')} alt={true}>
+            <ul className="px-4 list-disc list-inside">
              {holidayList.map((holiday, index) => (
-                <li key={index} className="font-body py-1 text-surface-dark dark:text-surface text-lg/loose">{holiday.date} - {holiday.name}</li>
+                <li key={index} className="py-2 font-body text-surface dark:text-surface-dark text-lg/loose">{t(holiday.date)} - {t(holiday.name)}</li>
              ))}
            </ul>
          </FormBox>
        </div>
        <div className="flex-grow">
          <FormBox title={t('information')}>
-            <ul className="list-inside list-disc px-4">
+            <ul className="px-4 list-disc list-inside">
              {
                Object.keys(userInformation).map((key, index) => (
-                  <li key={index} className="font-body py-1 text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
+                  <li key={index} className="py-2 font-body text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
                ))
              }
            </ul>
@@ -35,15 +35,14 @@ function Home() {
      <div className="basis-2/3">
        <div className="h-full">
          <FormBox title={t('notifications')}>
-            <ul className="list-inside list-disc px-4">
+            <ul className="px-4 list-disc list-inside">
              {homePageNotifications.map((notification, index) => (
-                <li className="font-body py-1 text-surface-dark dark:text-surface text-lg/loose" key={index}>{t(notification)}</li>
+                <li key={index} className="py-2 font-body text-surface-dark dark:text-surface text-lg/relaxed">{t(notification)}</li>
              ))}
            </ul>
          </FormBox>
        </div>
      </div>
-      
    </div>
  );
 }
--- a/src/pages/Placeholder.jsx
+++ b/src/pages/Placeholder.jsx
@@ -1,6 +1,6 @@
 function Placeholder() {
  return (
-    <div className="h-max text-center text-2xl font-body text-primary dark:text-primary-dark">
+    <div className="text-2xl text-center h-max font-body text-primary dark:text-primary-dark">
      <h1>Placeholder</h1>
    </div >
  );
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,18 +12,21 @@ export default {
      transparent: 'transparent',
      primary: {
        DEFAULT: '#008C46',
-        dark: '#6affb4'
+        dark: '#E6F4E1'
      },
      secondary: {
        DEFAULT: '#B1E1B3',
-        dark: '#20542f',
-        // dark: '#3d9f59',
-        variant: {DEFAULT: '#80AE82', dark: '#5F8E5F'}
+        dark: '#7DBD80',
+        variant: {DEFAULT: '#80AE82', dark: '#5B875D'}
+      },
+      tertiary: {
+        DEFAULT: '#f2f2df',
+        dark: '#3d3d29',
      },
      surface: {
        DEFAULT: '#F6F6F6',
-        dark: '#2d3133',
-        variant: {DEFAULT: '#F4FFF4', dark: '#3e4345'}
+        dark: '#2d332d',
+        variant: {DEFAULT: '#F4FFF4', dark: '#2b372c'}
      },
      
    },
Author	SHA1	Message	Date
Md Asif	366088b3f6	Merge branch 'main' of https://git.7o9o.net/md.asif5/osaka	2024-12-21 17:26:58 +05:30
Md Asif	d3df87d405	Remove commented dark color variants from primary and secondary color configurations in Tailwind CSS	2024-12-02 20:22:31 +05:30
asif	ae1a3de159	changed some styles	2024-11-22 15:03:08 +05:30
Md Asif	5e2394e1de	Update Bengali and Hindi translations for deadline notifications and contact information	2024-10-05 00:51:00 +05:30
Md Asif	91e4ca3380	Add copyright statement and privacy policy translations; update Footer component to use translations	2024-10-05 00:19:34 +05:30
Md Asif	9364a365ec	sorted class name with headwind extension	2024-10-05 00:07:06 +05:30
asif	6f1ec668cc	Merge branch 'main' of https://7o9o-lb-526275444.ap-south-1.elb.amazonaws.com/md.asif5/osaka	2024-10-01 12:16:06 +05:30
asif	2530d01695	changed project name	2024-10-01 12:15:55 +05:30
Md Asif	267d463843	Refactor layout styles for Header and App components	2024-10-01 01:52:35 +05:30
Md Asif	1615d30e71	changed title and favicon to IPKS design	2024-10-01 00:16:16 +05:30
Md Asif	45bc3eff57	completed homepage design	2024-09-30 23:43:30 +05:30