Refactor/faculty (#411)

This pull request introduces the "areas of interest" field to faculty
profiles across the application, enhancing the display and management of
faculty expertise. It also includes improvements to the faculty profile
UI, adds department information, and makes minor corrections to health
center data and translations.

**Faculty Profile Enhancements:**

* Added support for the `areasOfInterest` field to faculty profiles,
including database queries, profile editing, and display on both faculty
list and individual faculty pages. This allows faculty to specify and
showcase their research areas and specializations.
([app/[locale]/@modals/(.)profile/edit/page.tsxR59](diffhunk://#diff-e73212c94224fb2541821a5e5cdf5880f9ecace5d712ec5cd8dff6e590ded805R59),
[app/[locale]/@modals/(.)profile/edit/page.tsxR84](diffhunk://#diff-e73212c94224fb2541821a5e5cdf5880f9ecace5d712ec5cd8dff6e590ded805R84),
[app/[locale]/faculty-and-staff/page.tsxR339-R343](diffhunk://#diff-73d9b8e5183a03609e638663514db195677d4e964b2ba2898d7ad4aa250d81d6R339-R343),
[app/[locale]/faculty-and-staff/utils.tsxR115](diffhunk://#diff-3e362b10e143377150343a08121115b31eeefe1081b2d3cdc3bb5551eaec6b4dR115),
[app/[locale]/faculty-and-staff/utils.tsxL288-R317](diffhunk://#diff-3e362b10e143377150343a08121115b31eeefe1081b2d3cdc3bb5551eaec6b4dL288-R317),
[app/[locale]/faculty-and-staff/page.tsxR407-R488](diffhunk://#diff-73d9b8e5183a03609e638663514db195677d4e964b2ba2898d7ad4aa250d81d6R407-R488))
* Updated the profile edit form to handle `areasOfInterest` as a
comma-separated list, with user guidance and validation.
([app/[locale]/@modals/(.)profile/edit/client-utils.tsxR19](diffhunk://#diff-7c2e4d7020e011706a88acc0afb6b98c2056a5adb5900f07977925b7e4ec1b03R19),
[app/[locale]/@modals/(.)profile/edit/client-utils.tsxR130-R166](diffhunk://#diff-7c2e4d7020e011706a88acc0afb6b98c2056a5adb5900f07977925b7e4ec1b03R130-R166))

**UI/UX Improvements:**

* Enhanced the faculty profile UI by displaying department names,
improving the edit button appearance, and refining the layout for
research areas and external profile links.
([app/[locale]/faculty-and-staff/utils.tsxR128-R132](diffhunk://#diff-3e362b10e143377150343a08121115b31eeefe1081b2d3cdc3bb5551eaec6b4dR128-R132),
[app/[locale]/faculty-and-staff/utils.tsxL196-R202](diffhunk://#diff-3e362b10e143377150343a08121115b31eeefe1081b2d3cdc3bb5551eaec6b4dL196-R202),
[app/[locale]/faculty-and-staff/utils.tsxL206-R227](diffhunk://#diff-3e362b10e143377150343a08121115b31eeefe1081b2d3cdc3bb5551eaec6b4dL206-R227),
[app/[locale]/faculty-and-staff/page.tsxR365-R371](diffhunk://#diff-73d9b8e5183a03609e638663514db195677d4e964b2ba2898d7ad4aa250d81d6R365-R371),
[app/[locale]/faculty-and-staff/page.tsxL369-R396](diffhunk://#diff-73d9b8e5183a03609e638663514db195677d4e964b2ba2898d7ad4aa250d81d6L369-R396),
[app/[locale]/faculty-and-staff/utils.tsxL321-R346](diffhunk://#diff-3e362b10e143377150343a08121115b31eeefe1081b2d3cdc3bb5551eaec6b4dL321-R346))
* Separated the display of intellectual contribution counts into its own
section for better clarity and organization.
([app/[locale]/faculty-and-staff/utils.tsxR355-R377](diffhunk://#diff-3e362b10e143377150343a08121115b31eeefe1081b2d3cdc3bb5551eaec6b4dR355-R377))

**Internationalization (i18n):**

* Added translation keys and values for "Areas of Interest" in both
English and Hindi, ensuring the new field is properly localized.
[[1]](diffhunk://#diff-8ee4c65eaaf735c33bd37bf76d2a87fb76d02b7928096cc26db6364694988ceeR333)
[[2]](diffhunk://#diff-912c4f60653cc2c8d00fda0b21a7a65ab1c3e1c3f65007e1f211f40c951596b8R342)
[[3]](diffhunk://#diff-f021560af3d5a0f14642131f53f3141ab31d57c62b232272a5a097673e427d49R201)

**Minor Fixes and Cleanups:**

* Fixed formatting and consistency in the health center section,
including hospital names and timings.
([app/[locale]/institute/sections/health-centre/page.tsxL36-R36](diffhunk://#diff-38944ec42877c43150f9f89c1ae5bbc6a073d69363647186f6abfa9696cdcecfL36-R36),
[app/[locale]/institute/sections/health-centre/page.tsxL305-R309](diffhunk://#diff-38944ec42877c43150f9f89c1ae5bbc6a073d69363647186f6abfa9696cdcecfL305-R309),
[app/[locale]/institute/sections/health-centre/page.tsxL318-R328](diffhunk://#diff-38944ec42877c43150f9f89c1ae5bbc6a073d69363647186f6abfa9696cdcecfL318-R328),
[app/[locale]/institute/sections/health-centre/page.tsxL490-R503](diffhunk://#diff-38944ec42877c43150f9f89c1ae5bbc6a073d69363647186f6abfa9696cdcecfL490-R503))
* Cleaned up translation files for better readability and consistency.

---------

Co-authored-by: Navneet Kaur <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: ArnavSharma005 <[email protected]>
Co-authored-by: heydoyouknowme0 <[email protected]>

Author: 5 people

app/[locale]/@modals/(.)profile/edit/client-utils.tsx

@@ -16,6 +16,7 @@ import {
 import { CardContent, CardFooter } from '~/components/ui';
 import {
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -126,6 +127,43 @@ const renderFields = <T extends Record<string, any>>(
       .replace(/^./, (str: string) => str.toUpperCase())
       .trim();
 
+    // Handle areasOfInterest array field
+    if (fieldName === 'areasOfInterest') {
+      return (
+        <FormField
+          key={fieldName}
+          control={formControl}
+          name={fieldName as unknown as FieldPath<T>}
+          render={({ field }) => (
+            <FormItem className="md:col-span-2">
+              <FormLabel>{label}</FormLabel>
+              <FormControl>
+                <Textarea
+                  id={fieldName}
+                  className="w-full"
+                  placeholder="Enter areas of interest separated by commas"
+                  required={!isOptional}
+                  value={
+                    Array.isArray(field.value)
+                      ? (field.value as string[]).join(', ')
+                      : (field.value as string) ?? ''
+                  }
+                  onChange={(e) => {
+                    field.onChange(e.target.value);
+                  }}
+                  onBlur={field.onBlur}
+                />
+              </FormControl>
+              <FormMessage />
+              <FormDescription>
+                Enter multiple areas of interest separated by commas
+              </FormDescription>
+            </FormItem>
+          )}
+        />
+      );
+    }
+
     // Check if it's an enum field
     if (fieldSchema._def.typeName === ZodFirstPartyTypeKind.ZodEnum) {
       const enumValues = fieldSchema._def.values;

app/[locale]/@modals/(.)profile/edit/page.tsx

@@ -56,6 +56,7 @@ export default async function Page({
           linkedInId: true,
           googleScholarId: true,
           researchGateId: true,
+          areasOfInterest: true,
         },
         with: {
           person: {
@@ -80,6 +81,7 @@ export default async function Page({
           telephone: result.person.telephone,
           alternateCountryCode: result.person.alternateCountryCode ?? undefined,
           alternateTelephone: result.person.alternateTelephone ?? undefined,
+          areasOfInterest: result.areasOfInterest ?? [],
         };
       });
     if (!personalDetails) {

app/[locale]/faculty-and-staff/utils.tsx

@@ -112,6 +112,7 @@ async function FacultyOrStaffComponent({
       linkedInId: true,
       researchGateId: true,
       scopusId: true,
+      areasOfInterest: true,
     },
     with: {
       person: {
@@ -124,6 +125,11 @@ async function FacultyOrStaffComponent({
           alternateCountryCode: true,
         },
       },
+      department: {
+        columns: {
+          name: true,
+        },
+      },
     },
     extras: {
       publications: db
@@ -193,7 +199,7 @@ async function FacultyOrStaffComponent({
     <>
       <section className="container mb-6 mt-24 grid gap-3 xl:grid-cols-[calc(50%-0.75rem),0%,calc(50%-0.75rem)]">
         <article className="flex flex-grow flex-col rounded-2xl bg-shade-light p-5 drop-shadow-[0_4px_24px_rgba(0,43,91,0.1)]">
-          <h2 className="mb-0 text-primary-700 max-xl:mr-[8rem]">
+          <h2 className="mb-2 text-primary-700 max-xl:mr-[8rem]">
             {facultyDescription.person.name}
           </h2>
           <span className="flex items-center justify-between">
@@ -203,16 +209,22 @@ async function FacultyOrStaffComponent({
             {id && (
               <Button
                 variant="primary"
-                className="mr-5 !rounded-sm pr-1 max-xl:hidden"
+                className="mr-10 flex gap-2 !rounded-sm px-2 py-1 max-xl:hidden"
                 asChild
               >
-                <Link href={`/${locale}/profile/edit?personal=true`}>
-                  <MdOutlineEdit size={24} className="cursor-pointer" />
-                  Edit Profile
+                <Link
+                  href={`/${locale}/profile/edit?personal=true`}
+                  className="text-lg"
+                >
+                  <MdOutlineEdit size={22} className="cursor-pointer" />
+                  Edit
                 </Link>
               </Button>
             )}
           </span>
+          <h5 className="mb-4 text-neutral-900">
+            {facultyDescription.department?.name ?? ''}
+          </h5>
           {id && (
             <Button
               variant="primary"
@@ -285,25 +297,24 @@ async function FacultyOrStaffComponent({
         </section>
         {/* Faculty Intellectual Contribution counts */}
         <article className="rounded-2xl drop-shadow-[0_4px_24px_rgba(0,43,91,0.1)] max-xl:pt-3 xl:bg-shade-light xl:p-5">
-          <ul className="grid h-full grid-cols-3 gap-5 xl:ml-16">
-            {Object.entries(text.intellectualContributions).map(
-              ([key, value]) => (
-                <li
-                  key={key}
-                  className="flex h-full flex-col justify-around rounded-2xl bg-primary-700 p-3 max-xl:aspect-square"
-                >
-                  <h4 className="my-auto text-center text-shade-light">
-                    {facultyDescription[
-                      key as keyof typeof text.intellectualContributions
-                    ] ?? 0}
-                  </h4>
-                  <p className="mb-auto text-center font-light text-shade-light">
-                    {value}
-                  </p>
-                </li>
-              )
-            )}
-          </ul>
+          <div className="ml-16">
+            <h4>Research Areas and Specialization</h4>
+            {facultyDescription.areasOfInterest &&
+              facultyDescription.areasOfInterest.length > 0 && (
+                <ScrollArea className="h-44 w-full">
+                  <ul className="list-inside space-y-2 text-lg marker:text-primary-700">
+                    {facultyDescription.areasOfInterest.map((area, index) => (
+                      <li key={index}>
+                        <span className="font-bold text-primary-700">
+                          &gt;{' '}
+                        </span>{' '}
+                        {area}
+                      </li>
+                    ))}
+                  </ul>
+                </ScrollArea>
+              )}
+          </div>
         </article>
       </section>
       {/* Faculty links to external profiles */}
@@ -318,15 +329,21 @@ async function FacultyOrStaffComponent({
             return (
               <Link
                 key={key}
-                className="flex aspect-square flex-col justify-evenly rounded-2xl bg-shade-light drop-shadow-[0_4px_24px_rgba(0,43,91,0.1)] md:w-[23%] lg:w-[20%]"
-                href={facultyDescription[key] ?? ''}
+                className="flex flex-col justify-evenly rounded-2xl bg-shade-light drop-shadow-[0_4px_24px_rgba(0,43,91,0.1)] md:w-[25%] lg:w-[22%]"
+                href={
+                  !facultyDescription[key]
+                    ? ''
+                    : facultyDescription[key]!.startsWith('https')
+                      ? facultyDescription[key]!
+                      : `https://${facultyDescription[key]!}`
+                }
               >
                 <Image
                   alt={key}
                   src={`faculty-and-staff/${key}.svg`}
                   height={0}
                   width={0}
-                  className="mx-auto h-[50%] w-[50%]"
+                  className="mx-auto aspect-square h-[50%] w-[50%] object-contain"
                 />
                 <h5 className="mx-auto">{value}</h5>
               </Link>
@@ -335,6 +352,29 @@ async function FacultyOrStaffComponent({
         })}
       </section>
 
+      {/* Faculty Intlectual Contribution counts */}
+      <section className="container mb-6 justify-between max-md:gap-6">
+        <ul className="grid h-full grid-cols-3 gap-5">
+          {Object.entries(text.intellectualContributions).map(
+            ([key, value]) => (
+              <li
+                key={key}
+                className="flex h-full flex-col justify-around rounded-2xl bg-primary-700 p-3 py-6"
+              >
+                <h4 className="my-auto text-center text-shade-light">
+                  {facultyDescription[
+                    key as keyof typeof text.intellectualContributions
+                  ] ?? 0}
+                </h4>
+                <p className="mb-auto text-center font-light text-shade-light">
+                  {value}
+                </p>
+              </li>
+            )
+          )}
+        </ul>
+      </section>
+
       {/* Faculty Professional Details */}
       <section className="container flex gap-y-4 max-md:flex-col md:h-[28rem] md:gap-x-4 lg:gap-x-8">
         {/* Left Side Tabs */}

i18n/en.ts

@@ -330,6 +330,7 @@ const text: Translations = {
       researchGateId: 'Research Gate',
       scopusId: 'Scopus',
     },
+    areasOfInterest: 'Areas of Interest',
     intellectualContributions: {
       publications: 'PUBLICATIONS',
       continuingEducation: 'CONTINUING EDUCATION',

i18n/hi.ts

@@ -339,6 +339,7 @@ const text: Translations = {
       researchGateId: 'रिसर्च गेट',
       scopusId: 'स्कोपस',
     },
+    areasOfInterest: 'रुचि के क्षेत्र',
     intellectualContributions: {
       publications: 'प्रकाशन',
       continuingEducation: 'निरंतर शिक्षा',

i18n/translations.ts

@@ -198,6 +198,7 @@ export interface Translations {
       researchGateId: string;
       scopusId: string;
     };
+    areasOfInterest: string;
     intellectualContributions: {
       publications: string;
       continuingEducation: string;

lib/schemas/faculty-profile.ts

@@ -166,6 +166,16 @@ export const facultyPersonalDetailsSchema = z.object({
     .regex(/^\d{5,15}$/, 'Enter a valid phone number')
     .optional(),
   officeAddress: z.string().max(200),
+  areasOfInterest: z.preprocess(
+    (val) =>
+      typeof val === 'string'
+        ? val
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean)
+        : val,
+    z.array(z.string()).default([])
+  ),
 });
 
 export type FacultyProfileTopic = keyof typeof facultyProfileSchemas;

server/actions/faculty-profile.ts

@@ -220,6 +220,7 @@ export async function editFacultyProfilePersonalDetails(
           linkedInId: validated.linkedInId,
           googleScholarId: validated.googleScholarId,
           researchGateId: validated.researchGateId,
+          areasOfInterest: validated.areasOfInterest,
         })
         .where(eq(faculty.id, session.person.id));