From 851e631b76b2598a5d7c3e7de5bde42c5e960201 Mon Sep 17 00:00:00 2001
From: Deepanshu Mishra <d4deepanshu723@gmail.com>
Date: Sat, 31 Aug 2024 15:31:37 +0530
Subject: [PATCH 1/7] init_job_create

---
 package.json                            |   1 +
 src/app/create/page.tsx                 |   8 +-
 src/app/globals.css                     |  48 +++
 src/components/JobDescriptionEditor.tsx |  41 +++
 src/components/job-form.tsx             | 398 +++++++++++++++---------
 src/components/ui/card.tsx              |  86 +++++
 6 files changed, 428 insertions(+), 154 deletions(-)
 create mode 100644 src/components/JobDescriptionEditor.tsx
 create mode 100644 src/components/ui/card.tsx

diff --git a/package.json b/package.json
index 940ac277..d3fdd7ba 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.52.2",
     "react-icons": "^5.2.1",
+    "react-quill": "^2.0.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8",
diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
index 7b32f80e..92548bd3 100644
--- a/src/app/create/page.tsx
+++ b/src/app/create/page.tsx
@@ -3,7 +3,13 @@ import React from 'react';
 
 const page = () => {
   return (
-    <div className="container">
+    <div className="mt-10">
+      <div>
+        <h1 className="text-center text-4xl font-semibold">Post a job</h1>
+        <p className="text-center mt-6 text-lg text-gray-300">
+          100xJobs is trusted by leading companies
+        </p>
+      </div>
       <PostJobForm />
     </div>
   );
diff --git a/src/app/globals.css b/src/app/globals.css
index 6228a08a..b3c421ed 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -297,3 +297,51 @@
     transform: rotate(360deg);
   }
 }
+
+/* Custom styles for Quill editor */
+.ql-toolbar.ql-snow {
+  border: none !important;
+  background-color: #1f2937 !important;
+  border-bottom: 1px solid #374151 !important;
+}
+
+.ql-container.ql-snow {
+  border: none !important;
+  max-height: 56rem; /* Set a fixed height */
+  overflow-y: hidden; /* Hide vertical overflow */
+  overflow-x: auto; /* Allow horizontal scrolling */
+}
+
+.ql-editor {
+  min-height: 10px;
+  overflow-y: hidden; /* Prevent height increase */
+  white-space: nowrap; /* Ensure long lines don't wrap */
+}
+
+.ql-editor.ql-blank::before {
+  color: #6b7280 !important;
+}
+
+.ql-snow .ql-stroke {
+  stroke: #9ca3af !important;
+}
+
+.ql-snow .ql-fill {
+  fill: #9ca3af !important;
+}
+
+.ql-snow .ql-picker {
+  color: #9ca3af !important;
+}
+
+/* Ensure the editor takes up full width of its container */
+.job-description-editor {
+  width: 100% !important;
+}
+
+/* Ensure long content does not wrap within the editor */
+.job-description-editor .ql-editor {
+  white-space: nowrap !important;
+  overflow-x: hidden !important; /* Allow horizontal scrolling */
+  overflow-y: hidden !important; /* Hide vertical overflow */
+}
diff --git a/src/components/JobDescriptionEditor.tsx b/src/components/JobDescriptionEditor.tsx
new file mode 100644
index 00000000..abe51f67
--- /dev/null
+++ b/src/components/JobDescriptionEditor.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+
+const JobDescriptionEditor = () => {
+  const modules = {
+    toolbar: [
+      ['bold', 'italic', 'underline'],
+      [{ header: '1' }, { header: '2' }],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      ['link'],
+    ],
+  };
+
+  const formats = [
+    'bold',
+    'italic',
+    'underline',
+    'header',
+    'list',
+    'bullet',
+    'link',
+  ];
+
+  return (
+    <div className="bg-gray-900 p-4  rounded mx-auto w-[37rem]">
+      <h2 className="text-sm font-semibold  text-white">Job description</h2>
+      <div className="bg-gray-800 rounded-xl mt-2 overflow-hidden">
+        <ReactQuill
+          theme="snow"
+          modules={modules}
+          formats={formats}
+          placeholder="Tell us about your job"
+          className="text-white bg-gray-800 overflow-hidden job-description-editor"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default JobDescriptionEditor;
diff --git a/src/components/job-form.tsx b/src/components/job-form.tsx
index f5e6621d..baf7c3b4 100644
--- a/src/components/job-form.tsx
+++ b/src/components/job-form.tsx
@@ -3,15 +3,14 @@ import { createJob } from '@/actions/job.action';
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
-  FormMessage,
 } from '@/components/ui/form';
 import {
   Select,
   SelectContent,
-  SelectItem,
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
@@ -24,11 +23,12 @@ import {
 } from '../lib/validators/jobs.validator';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
-import { Textarea } from './ui/textarea';
-import { Label } from './ui/label';
-import { Switch } from './ui/switch';
 import { useToast } from './ui/use-toast';
-import { filters } from '@/lib/constant/jobs.constant';
+import { Calendar, LucideRocket, MailOpenIcon } from 'lucide-react';
+import JobDescriptionEditor from './JobDescriptionEditor';
+import ReactQuill from 'react-quill';
+import Image from 'next/image';
+
 const PostJobForm = () => {
   const { toast } = useToast();
   const form = useForm<JobPostSchemaType>({
@@ -43,6 +43,26 @@ const PostJobForm = () => {
       maxSalary: 0,
     },
   });
+
+  const modules = {
+    toolbar: [
+      ['bold', 'italic', 'underline'],
+      [{ header: '1' }, { header: '2' }],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      ['link'],
+    ],
+  };
+
+  const formats = [
+    'bold',
+    'italic',
+    'underline',
+    'header',
+    'list',
+    'bullet',
+    'link',
+  ];
+
   const handleFormSubmit = async (data: JobPostSchemaType) => {
     try {
       const response = await createJob(data);
@@ -77,199 +97,271 @@ const PostJobForm = () => {
     }
   }, [watchHasSalaryRange, form]);
   return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(handleFormSubmit)}
-        className="h-fit flex flex-col gap-3 p-2"
-      >
-        <div className="flex flex-col gap-1">
+    <div className="flex flex-col items-center gap-y-10 justify-center">
+      <div className="mt-4 flex gap-2">
+        <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white w-48">
+          <Calendar className="w-8 h-8 mb-3 mx-auto text-green-500" />
+          <p className="text-base font-semibold mb-1">Posted for</p>
+          <p className="text-gray-400 text-sm">30 days</p>
+        </div>
+
+        <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white w-48">
+          <MailOpenIcon className="w-8 h-8 mb-3 mx-auto text-purple-500" />
+          <p className="text-base font-semibold mb-1">Emailed to</p>
+          <p className="text-gray-400 text-sm">290,301 subscribers</p>
+        </div>
+
+        <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white w-48">
+          <LucideRocket className="w-8 h-8 mb-3 mx-auto text-orange-500" />
+          <p className="text-base font-semibold mb-1">Reach</p>
+          <p className="text-gray-400 text-sm">
+            300,000<span className="text-blue-500">+</span>
+          </p>
+        </div>
+      </div>
+
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(handleFormSubmit)}
+          className="bg-gray-900 w-[37rem] text-gray-300 p-6 rounded-lg space-y-4"
+        >
+          <h2 className="text-2xl font-semibold mb-6">Job details</h2>
+
           <FormField
             control={form.control}
             name="title"
             render={({ field }) => (
               <FormItem>
-                <FormLabel className="text-sm font-semibold">
-                  Job Title
-                </FormLabel>
+                <FormLabel className="font-medium">Job title*</FormLabel>
                 <FormControl>
                   <Input
                     {...field}
-                    className="w-full border-gray-400"
-                    placeholder="Job Title"
+                    className="w-full bg-gray-800 border-none text-white"
+                    placeholder="What's the job?"
                   />
                 </FormControl>
-                <FormMessage />
               </FormItem>
             )}
           />
-        </div>
 
-        <div className="flex flex-col gap-1">
-          <FormField
-            control={form.control}
-            name="description"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="text-sm font-semibold">
-                  Description
-                </FormLabel>
-                <FormControl>
-                  <Textarea
-                    {...field}
-                    className="w-full border-gray-400"
-                    placeholder="Enter description here"
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </div>
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="font-medium">Category*</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger className="bg-gray-800 border-none text-white">
+                        <SelectValue placeholder="Select a category" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {/* Add category options here */}
+                    </SelectContent>
+                  </Select>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="font-medium">Timezone*</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger className="bg-gray-800 border-none text-white">
+                        <SelectValue placeholder="Select a timezone" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {/* Add timezone options here */}
+                    </SelectContent>
+                  </Select>
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="font-medium">Salary*</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger className="bg-gray-800 border-none text-white">
+                        <SelectValue placeholder="Select a salary range" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {/* Add salary range options here */}
+                    </SelectContent>
+                  </Select>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="font-medium">Type*</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger className="bg-gray-800 border-none text-white">
+                        <SelectValue placeholder="Select a type" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {/* Add job type options here */}
+                    </SelectContent>
+                  </Select>
+                </FormItem>
+              )}
+            />
+          </div>
 
-        <div className="flex flex-col gap-1">
           <FormField
             control={form.control}
-            name="companyName"
+            name="title"
             render={({ field }) => (
               <FormItem>
-                <FormLabel className="text-sm font-semibold">
-                  Company Name
-                </FormLabel>
+                <FormLabel className="font-medium">Tags</FormLabel>
                 <FormControl>
                   <Input
                     {...field}
-                    className="w-full border-gray-400"
-                    placeholder="Enter comapany name here"
+                    className="w-full bg-gray-800 border-none text-white"
+                    placeholder="Search for tags"
                   />
                 </FormControl>
-                <FormMessage />
               </FormItem>
             )}
           />
-        </div>
-        <div className="flex flex-col gap-1">
-          <FormField
-            control={form.control}
-            name="workMode"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel className="text-sm font-semibold ">
-                  Work Mode
-                </FormLabel>
-                <Select onValueChange={field.onChange} value={field.value}>
-                  <FormControl>
-                    <SelectTrigger className="border-gray-400">
-                      <SelectValue placeholder="Select work mode type" />
-                    </SelectTrigger>
-                  </FormControl>
-                  <SelectContent>
-                    {filters.workMode.map((item) => (
-                      <SelectItem key={item.id} value={item.value}>
-                        {item.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        </div>
-        <div className="flex flex-col gap-1">
+
           <FormField
             control={form.control}
-            name="location"
+            name="title"
             render={({ field }) => (
               <FormItem>
-                <FormLabel className="text-sm font-semibold">
-                  Location
-                </FormLabel>
+                <FormLabel className="font-medium">Application*</FormLabel>
                 <FormControl>
                   <Input
                     {...field}
-                    className="w-full border-gray-400"
-                    placeholder="Job Location"
+                    className="w-full bg-gray-800 border-none text-white"
+                    placeholder="URL or email address"
                   />
                 </FormControl>
-                <FormMessage />
+                <FormDescription className="text-sm text-gray-500">
+                  Please enter a URL or email address
+                </FormDescription>
               </FormItem>
             )}
           />
-        </div>
-        <div className="flex flex-col gap-2">
-          <div className="">
-            <Label>Salary Range &#40;in $ per annum&#41;</Label>
-          </div>
-          <FormField
-            control={form.control}
-            name="hasSalaryRange"
-            render={({ field }) => (
-              <FormItem className="flex items-center space-y-0 gap-2">
-                <FormControl>
-                  <Switch
-                    checked={field.value}
-                    onCheckedChange={field.onChange}
-                  />
-                </FormControl>
+        </form>
+      </Form>
 
-                <FormLabel className="mt-0">
-                  Do you want to disclose the salary range?
-                </FormLabel>
-              </FormItem>
-            )}
-          />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(handleFormSubmit)}
+          className="bg-gray-900 text-white rounded-lg"
+        >
+          <JobDescriptionEditor />
+        </form>
+      </Form>
+      <div className="bg-gray-900 p-6 rounded-lg w-[37rem] mx-auto text-gray-300">
+        <h2 className="text-lg font-semibold mb-4 text-gray-300">Company</h2>
+
+        {/* Logo Upload Section */}
+        <div className="flex flex-col items-center mb-6">
+          <div className="w-20 h-20 bg-gray-700 border border-dashed border-gray-500 rounded-md flex items-center justify-center cursor-pointer mb-2">
+            {/* Placeholder for Avatar */}
+          </div>
+          <p className="text-sm text-gray-500 text-center">
+            Click the avatar to change or upload your company logo
+          </p>
         </div>
-        {watchHasSalaryRange && (
-          <div className="flex gap-4">
-            <FormField
-              control={form.control}
-              name="minSalary"
-              render={({ field }) => (
-                <FormItem className="flex-1">
-                  <div className="space-y-0.5">
-                    <FormLabel>Min</FormLabel>
-                  </div>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      className="w-full border-gray-400"
-                      placeholder="0"
-                    />
-                  </FormControl>{' '}
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
 
-            <FormField
-              control={form.control}
-              name="maxSalary"
-              render={({ field }) => (
-                <FormItem className="flex-1">
-                  <div className="space-y-0.5">
-                    <FormLabel>Max</FormLabel>
-                  </div>
-                  <FormControl>
-                    <Input
-                      {...field}
-                      className="w-full border-gray-400"
-                      placeholder="0"
-                    />
-                  </FormControl>{' '}
-                  <FormMessage />
-                </FormItem>
-              )}
+        {/* Company Name and Email Fields */}
+        <div className="flex gap-4 mb-4">
+          <div className="flex-1">
+            <label className="block text-sm mb-1 text-gray-400">
+              Company name*
+            </label>
+            <input
+              type="text"
+              placeholder="What's your company called?"
+              className="w-full px-3 py-2 bg-gray-700 border-none rounded-md text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            />
+          </div>
+          <div className="flex-1">
+            <label className="block text-sm mb-1 text-gray-400">
+              Company email*
+            </label>
+            <input
+              type="email"
+              placeholder="Enter your email address"
+              className="w-full px-3 py-2 bg-gray-700 border-none rounded-md text-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
             />
           </div>
-        )}
+        </div>
+        <div>
+          <label className="block text-sm mb-1 text-gray-400">
+            Company bio
+          </label>
+          <div className="bg-gray-700 rounded-md">
+            <ReactQuill
+              theme="snow"
+              modules={modules}
+              formats={formats}
+              placeholder="Tell us about your company"
+              className="text-white bg-gray-800 overflow-hidden job-description-editor"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-gray-900 p-6 rounded-lg w-[37rem] mx-auto text-gray-300">
+        <h2 className="text-lg font-semibold mb-4 text-gray-300">Payment</h2>
+        <Button className="w-full rounded-full mt-4">
+          Continue to Payment
+        </Button>
 
-        <div className="w-full flex justify-end items-center mt-4">
-          <Button type="submit" disabled={form.formState.isSubmitting}>
-            {form.formState.isSubmitting ? 'Please wait...' : 'Create Job'}
-          </Button>
+        <div className="flex mt-4 gap-2 flex-col items-center">
+          <h1 className="text-center text-gray-400">
+            &quot;I&apos;m a huge fan of remote work and 100xJobs is by far my
+            favorite job board.&quot;
+          </h1>
+          <Image
+            src={'/main.png'}
+            alt="100xJobs"
+            width={40}
+            height={40}
+            className="rounded-full"
+          />
+          <h1 className="text-gray-300">Harkirat Singh</h1>
+          <h1 className="text-sm text-gray-300">100xJobs.com</h1>
         </div>
-      </form>
-    </Form>
+      </div>
+    </div>
   );
 };
 
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 00000000..fca7be46
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

From 3361033adf9f8492b58e0b43731ea65b998e6dc0 Mon Sep 17 00:00:00 2001
From: Deepanshu Mishra <d4deepanshu723@gmail.com>
Date: Sat, 31 Aug 2024 17:08:17 +0530
Subject: [PATCH 2/7] zod_schema_updates

---
 src/components/job-form.tsx          | 57 ++++++++++++++++--------
 src/lib/constant/jobs.constant.ts    | 31 +++++++++++++
 src/lib/validators/jobs.validator.ts | 66 +++++++++++++++++++++++++++-
 3 files changed, 134 insertions(+), 20 deletions(-)

diff --git a/src/components/job-form.tsx b/src/components/job-form.tsx
index baf7c3b4..4936b4e9 100644
--- a/src/components/job-form.tsx
+++ b/src/components/job-form.tsx
@@ -11,6 +11,7 @@ import {
 import {
   Select,
   SelectContent,
+  SelectItem,
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
@@ -38,9 +39,13 @@ const PostJobForm = () => {
       description: '',
       companyName: '',
       location: '',
-      hasSalaryRange: false,
+      workMode: 'remote',
+      type: 'full-time',
+      category: 'design',
+      hasSalaryRange: true,
       minSalary: 0,
       maxSalary: 0,
+      application: '',
     },
   });
 
@@ -147,7 +152,7 @@ const PostJobForm = () => {
           <div className="grid grid-cols-2 gap-4">
             <FormField
               control={form.control}
-              name="title"
+              name="category"
               render={({ field }) => (
                 <FormItem>
                   <FormLabel className="font-medium">Category*</FormLabel>
@@ -161,7 +166,12 @@ const PostJobForm = () => {
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      {/* Add category options here */}
+                      <SelectItem value="design">Design</SelectItem>
+                      <SelectItem value="development">Development</SelectItem>
+                      <SelectItem value="marketing">Marketing</SelectItem>
+                      <SelectItem value="management">Management</SelectItem>
+                      <SelectItem value="finance">Finance</SelectItem>
+                      <SelectItem value="support">Support</SelectItem>
                     </SelectContent>
                   </Select>
                 </FormItem>
@@ -170,21 +180,23 @@ const PostJobForm = () => {
 
             <FormField
               control={form.control}
-              name="title"
+              name="workMode"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel className="font-medium">Timezone*</FormLabel>
+                  <FormLabel className="font-medium">Work mode*</FormLabel>
                   <Select
                     onValueChange={field.onChange}
                     defaultValue={field.value}
                   >
                     <FormControl>
                       <SelectTrigger className="bg-gray-800 border-none text-white">
-                        <SelectValue placeholder="Select a timezone" />
+                        <SelectValue placeholder="Select a workmode" />
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      {/* Add timezone options here */}
+                      <SelectItem value="remote">Remote</SelectItem>
+                      <SelectItem value="office">Office</SelectItem>
+                      <SelectItem value="hybrid">Hybrid</SelectItem>
                     </SelectContent>
                   </Select>
                 </FormItem>
@@ -195,14 +207,11 @@ const PostJobForm = () => {
           <div className="grid grid-cols-2 gap-4">
             <FormField
               control={form.control}
-              name="title"
+              name="hasSalaryRange"
               render={({ field }) => (
                 <FormItem>
                   <FormLabel className="font-medium">Salary*</FormLabel>
-                  <Select
-                    onValueChange={field.onChange}
-                    defaultValue={field.value}
-                  >
+                  <Select onValueChange={field.onChange}>
                     <FormControl>
                       <SelectTrigger className="bg-gray-800 border-none text-white">
                         <SelectValue placeholder="Select a salary range" />
@@ -210,6 +219,13 @@ const PostJobForm = () => {
                     </FormControl>
                     <SelectContent>
                       {/* Add salary range options here */}
+                      <SelectItem value="$0-10k">$0-10k</SelectItem>
+                      <SelectItem value="$10k-25k">$10k-25k</SelectItem>
+                      <SelectItem value="$25k-50k">$25k-50k</SelectItem>
+                      <SelectItem value="$50k-75k">$50k-75k</SelectItem>
+                      <SelectItem value="$75k-100k">$75k-100k</SelectItem>
+                      <SelectItem value="$100k+">$100k+</SelectItem>
+                      <SelectItem value="commision">Commision</SelectItem>
                     </SelectContent>
                   </Select>
                 </FormItem>
@@ -218,7 +234,7 @@ const PostJobForm = () => {
 
             <FormField
               control={form.control}
-              name="title"
+              name="type"
               render={({ field }) => (
                 <FormItem>
                   <FormLabel className="font-medium">Type*</FormLabel>
@@ -232,7 +248,10 @@ const PostJobForm = () => {
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      {/* Add job type options here */}
+                      <SelectItem value="full-time">Full-time</SelectItem>
+                      <SelectItem value="part-time">Part-time</SelectItem>
+                      <SelectItem value="contract">Contract</SelectItem>
+                      <SelectItem value="internship">Internship</SelectItem>
                     </SelectContent>
                   </Select>
                 </FormItem>
@@ -242,15 +261,15 @@ const PostJobForm = () => {
 
           <FormField
             control={form.control}
-            name="title"
+            name="location"
             render={({ field }) => (
               <FormItem>
-                <FormLabel className="font-medium">Tags</FormLabel>
+                <FormLabel className="font-medium">Location</FormLabel>
                 <FormControl>
                   <Input
                     {...field}
                     className="w-full bg-gray-800 border-none text-white"
-                    placeholder="Search for tags"
+                    placeholder="Where is the job located?"
                   />
                 </FormControl>
               </FormItem>
@@ -259,7 +278,7 @@ const PostJobForm = () => {
 
           <FormField
             control={form.control}
-            name="title"
+            name="application"
             render={({ field }) => (
               <FormItem>
                 <FormLabel className="font-medium">Application*</FormLabel>
@@ -333,7 +352,7 @@ const PostJobForm = () => {
               modules={modules}
               formats={formats}
               placeholder="Tell us about your company"
-              className="text-white bg-gray-800 overflow-hidden job-description-editor"
+              className="text-white bg-gray-800 rounded-lg overflow-hidden job-description-editor"
             />
           </div>
         </div>
diff --git a/src/lib/constant/jobs.constant.ts b/src/lib/constant/jobs.constant.ts
index 46c3ee29..dabe2a3a 100644
--- a/src/lib/constant/jobs.constant.ts
+++ b/src/lib/constant/jobs.constant.ts
@@ -12,6 +12,37 @@ export enum SortByEnums {
   POSTEDAT_ASC = 'postedat_asc',
   POSTEDAT_DESC = 'postedat_desc',
 }
+export const jobType = {
+  fullTime: 'full-time',
+  partTime: 'part-time',
+  contract: 'contract',
+  internship: 'internship',
+};
+
+export enum JobTypeEnums {
+  FULLTIME = 'full-time',
+  PARTTIME = 'part-time',
+  CONTRACT = 'contract',
+  INTERNSHIP = 'internship',
+}
+
+export const category = {
+  design: 'design',
+  development: 'development',
+  marketing: 'marketing',
+  management: 'management',
+  finance: 'finance',
+  support: 'support',
+};
+
+export enum CategoryEnums {
+  DESIGN = 'design',
+  DEVELOPMENT = 'development',
+  MARKETING = 'marketing',
+  MANAGEMENT = 'management',
+  FINANCE = 'finance',
+  SUPPORT = 'support',
+}
 export const filters = {
   workMode: [
     {
diff --git a/src/lib/validators/jobs.validator.ts b/src/lib/validators/jobs.validator.ts
index cd3cfc77..386c62b9 100644
--- a/src/lib/validators/jobs.validator.ts
+++ b/src/lib/validators/jobs.validator.ts
@@ -1,11 +1,18 @@
 import { z } from 'zod';
-import { WorkModeEnums } from '../constant/jobs.constant';
+import {
+  CategoryEnums,
+  JobTypeEnums,
+  WorkModeEnums,
+} from '../constant/jobs.constant';
 
 export const JobPostSchema = z
   .object({
     title: z.string().min(1, 'Title is required'),
+    application: z.string().min(1, 'Application is required'),
     description: z.string().min(1, 'Description is required'),
     companyName: z.string().min(1, 'Company Name is required'),
+    companyEmail: z.string().email('Invalid email').min(1, 'Email is required'),
+    companyBio: z.string().min(1, 'Company Bio is required'),
     location: z.string().min(1, 'Location is required'),
     hasSalaryRange: z.boolean(),
     minSalary: z.coerce
@@ -19,6 +26,22 @@ export const JobPostSchema = z
     workMode: z.enum(['remote', 'office', 'hybrid'], {
       message: 'Work mode is required',
     }),
+    category: z.enum(
+      [
+        'design',
+        'development',
+        'marketing',
+        'management',
+        'finance',
+        'support',
+      ],
+      {
+        message: 'Category is required',
+      }
+    ),
+    type: z.enum(['full-time', 'part-time', 'contract'], {
+      message: 'Type is required',
+    }),
   })
   .superRefine((data, ctx) => {
     if (data.hasSalaryRange) {
@@ -66,6 +89,47 @@ export const JobQuerySchema = z.object({
       }
       return val;
     }),
+  category: z
+    .union([
+      z.string(),
+      z.array(
+        z.enum([
+          CategoryEnums.DESIGN,
+          CategoryEnums.DEVELOPMENT,
+          CategoryEnums.MARKETING,
+          CategoryEnums.FINANCE,
+          CategoryEnums.SUPPORT,
+          CategoryEnums.MANAGEMENT,
+        ])
+      ),
+    ])
+    .optional()
+    .transform((val) => {
+      if (typeof val === 'string') {
+        return [val];
+      }
+      return val;
+    }),
+
+  type: z
+    .union([
+      z.string(),
+      z.array(
+        z.enum([
+          JobTypeEnums.FULLTIME,
+          JobTypeEnums.PARTTIME,
+          JobTypeEnums.CONTRACT,
+          JobTypeEnums.INTERNSHIP,
+        ])
+      ),
+    ])
+    .optional()
+    .transform((val) => {
+      if (typeof val === 'string') {
+        return [val];
+      }
+      return val;
+    }),
   location: z
     .union([z.string(), z.array(z.string())])
     .optional()

From db296259cab654f7fac6b92ccf06c84deb640fab Mon Sep 17 00:00:00 2001
From: Deepanshu Mishra <d4deepanshu723@gmail.com>
Date: Sun, 1 Sep 2024 11:45:58 +0530
Subject: [PATCH 3/7] fix_build_issue

---
 src/components/JobDescriptionEditor.tsx |  3 ++-
 src/components/job-form.tsx             | 22 +++++++++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/JobDescriptionEditor.tsx b/src/components/JobDescriptionEditor.tsx
index abe51f67..06b74e76 100644
--- a/src/components/JobDescriptionEditor.tsx
+++ b/src/components/JobDescriptionEditor.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import ReactQuill from 'react-quill';
+import dynamic from 'next/dynamic';
+const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });
 import 'react-quill/dist/quill.snow.css';
 
 const JobDescriptionEditor = () => {
diff --git a/src/components/job-form.tsx b/src/components/job-form.tsx
index 4936b4e9..a4becbe4 100644
--- a/src/components/job-form.tsx
+++ b/src/components/job-form.tsx
@@ -27,8 +27,10 @@ import { Input } from './ui/input';
 import { useToast } from './ui/use-toast';
 import { Calendar, LucideRocket, MailOpenIcon } from 'lucide-react';
 import JobDescriptionEditor from './JobDescriptionEditor';
-import ReactQuill from 'react-quill';
+import dynamic from 'next/dynamic';
+const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });
 import Image from 'next/image';
+import { FaFileUpload } from 'react-icons/fa';
 
 const PostJobForm = () => {
   const { toast } = useToast();
@@ -49,6 +51,11 @@ const PostJobForm = () => {
     },
   });
 
+  const handleClick = () => {
+    //@ts-ignore
+    document.getElementById('fileInput').click();
+  };
+
   const modules = {
     toolbar: [
       ['bold', 'italic', 'underline'],
@@ -311,9 +318,18 @@ const PostJobForm = () => {
 
         {/* Logo Upload Section */}
         <div className="flex flex-col items-center mb-6">
-          <div className="w-20 h-20 bg-gray-700 border border-dashed border-gray-500 rounded-md flex items-center justify-center cursor-pointer mb-2">
-            {/* Placeholder for Avatar */}
+          <div
+            className="w-20 h-20 bg-gray-700 border border-dashed border-gray-500 rounded-md flex items-center justify-center cursor-pointer mb-2"
+            onClick={handleClick}
+          >
+            <FaFileUpload className="text-white text-2xl" />
           </div>
+          <input
+            id="fileInput"
+            type="file"
+            accept="image/*"
+            className="hidden"
+          />
           <p className="text-sm text-gray-500 text-center">
             Click the avatar to change or upload your company logo
           </p>

From 62d89f125c65b32ea69b63521123347b16f3ce05 Mon Sep 17 00:00:00 2001
From: Deepanshu Mishra <d4deepanshu723@gmail.com>
Date: Tue, 3 Sep 2024 20:09:08 +0530
Subject: [PATCH 4/7] fix_constants

---
 src/lib/constant/jobs.constant.ts    | 146 ++++++++-------------------
 src/lib/validators/jobs.validator.ts |  60 ++++-------
 2 files changed, 61 insertions(+), 145 deletions(-)

diff --git a/src/lib/constant/jobs.constant.ts b/src/lib/constant/jobs.constant.ts
index dabe2a3a..1764b19b 100644
--- a/src/lib/constant/jobs.constant.ts
+++ b/src/lib/constant/jobs.constant.ts
@@ -1,104 +1,54 @@
-export const workMode = {
-  remote: 'remote',
-  office: 'office',
-  hybrid: 'hybrid',
-};
-export enum WorkModeEnums {
-  REMOTE = 'remote',
-  OFFICE = 'office',
-  HYBRID = 'hybrid',
-}
-export enum SortByEnums {
-  POSTEDAT_ASC = 'postedat_asc',
-  POSTEDAT_DESC = 'postedat_desc',
-}
-export const jobType = {
-  fullTime: 'full-time',
-  partTime: 'part-time',
-  contract: 'contract',
-  internship: 'internship',
-};
+export const WorkMode = {
+  REMOTE: 'remote',
+  OFFICE: 'office',
+  HYBRID: 'hybrid',
+} as const;
 
-export enum JobTypeEnums {
-  FULLTIME = 'full-time',
-  PARTTIME = 'part-time',
-  CONTRACT = 'contract',
-  INTERNSHIP = 'internship',
-}
+export type WorkMode = (typeof WorkMode)[keyof typeof WorkMode];
 
-export const category = {
-  design: 'design',
-  development: 'development',
-  marketing: 'marketing',
-  management: 'management',
-  finance: 'finance',
-  support: 'support',
-};
+export const JobType = {
+  FULLTIME: 'full-time',
+  PARTTIME: 'part-time',
+  CONTRACT: 'contract',
+  INTERNSHIP: 'internship',
+} as const;
+
+export type JobType = (typeof JobType)[keyof typeof JobType];
+
+export const Category = {
+  DESIGN: 'design',
+  DEVELOPMENT: 'development',
+  MARKETING: 'marketing',
+  MANAGEMENT: 'management',
+  FINANCE: 'finance',
+  SUPPORT: 'support',
+} as const;
+
+export type Category = (typeof Category)[keyof typeof Category];
+
+export const SortBy = {
+  POSTEDAT_ASC: 'postedat_asc',
+  POSTEDAT_DESC: 'postedat_desc',
+} as const;
+
+export type SortBy = (typeof SortBy)[keyof typeof SortBy];
 
-export enum CategoryEnums {
-  DESIGN = 'design',
-  DEVELOPMENT = 'development',
-  MARKETING = 'marketing',
-  MANAGEMENT = 'management',
-  FINANCE = 'finance',
-  SUPPORT = 'support',
-}
 export const filters = {
   workMode: [
-    {
-      id: 1,
-      label: 'Remote',
-      value: workMode.remote,
-    },
-    {
-      id: 2,
-      label: 'Office',
-      value: workMode.office,
-    },
-    {
-      id: 3,
-      label: 'Hybrid',
-      value: workMode.hybrid,
-    },
+    { id: 1, label: 'Remote', value: WorkMode.REMOTE },
+    { id: 2, label: 'Office', value: WorkMode.OFFICE },
+    { id: 3, label: 'Hybrid', value: WorkMode.HYBRID },
   ],
   chooseCurrency: [
-    {
-      id: 1,
-      label: 'INR',
-      value: 'INR',
-    },
-    {
-      id: 2,
-      label: 'USD',
-      value: 'USD',
-    },
+    { id: 1, label: 'INR', value: 'INR' },
+    { id: 2, label: 'USD', value: 'USD' },
   ],
   salaryRange: [
-    {
-      id: 1,
-      label: '$0-$5k',
-      value: '0-5000',
-    },
-    {
-      id: 2,
-      label: '$5-$10k',
-      value: '5000-10000',
-    },
-    {
-      id: 3,
-      label: '$10-$30k',
-      value: '10000-30000',
-    },
-    {
-      id: 4,
-      label: '$30-$50k',
-      value: '30000-50000',
-    },
-    {
-      id: 5,
-      label: '$50k or above',
-      value: '50000-above',
-    },
+    { id: 1, label: '$0-$5k', value: '0-5000' },
+    { id: 2, label: '$5-$10k', value: '5000-10000' },
+    { id: 3, label: '$10-$30k', value: '10000-30000' },
+    { id: 4, label: '$30-$50k', value: '30000-50000' },
+    { id: 5, label: '$50k or above', value: '50000-above' },
   ],
   location: [
     { id: 1, label: 'Bangalore', value: 'bangalore' },
@@ -115,14 +65,6 @@ export const filters = {
 };
 
 export const jobSorting = [
-  {
-    id: 1,
-    label: 'Latest Jobs',
-    value: 'postedat_desc',
-  },
-  {
-    id: 2,
-    label: 'Oldest Jobs',
-    value: 'postedat_asc',
-  },
+  { id: 1, label: 'Latest Jobs', value: SortBy.POSTEDAT_DESC },
+  { id: 2, label: 'Oldest Jobs', value: SortBy.POSTEDAT_ASC },
 ];
diff --git a/src/lib/validators/jobs.validator.ts b/src/lib/validators/jobs.validator.ts
index 5469f40e..7e037305 100644
--- a/src/lib/validators/jobs.validator.ts
+++ b/src/lib/validators/jobs.validator.ts
@@ -1,9 +1,5 @@
 import { z } from 'zod';
-import {
-  CategoryEnums,
-  JobTypeEnums,
-  WorkModeEnums,
-} from '../constant/jobs.constant';
+import { Category, JobType, WorkMode, SortBy } from '../constant/jobs.constant';
 
 export const JobPostSchema = z
   .object({
@@ -23,25 +19,23 @@ export const JobPostSchema = z
       .number({ message: 'Max salary must be a number' })
       .nonnegative()
       .optional(),
-    workMode: z.enum(['remote', 'office', 'hybrid'], {
+    workMode: z.enum([WorkMode.REMOTE, WorkMode.OFFICE, WorkMode.HYBRID], {
       message: 'Work mode is required',
     }),
-    category: z.enum(
+    category: z.enum(Object.values(Category) as [string, ...string[]], {
+      message: 'Category is required',
+    }),
+    type: z.enum(
       [
-        'design',
-        'development',
-        'marketing',
-        'management',
-        'finance',
-        'support',
+        JobType.FULLTIME,
+        JobType.PARTTIME,
+        JobType.CONTRACT,
+        JobType.INTERNSHIP,
       ],
       {
-        message: 'Category is required',
+        message: 'Type is required',
       }
     ),
-    type: z.enum(['full-time', 'part-time', 'contract'], {
-      message: 'Type is required',
-    }),
   })
   .superRefine((data, ctx) => {
     if (data.hasSalaryRange) {
@@ -74,13 +68,7 @@ export const JobQuerySchema = z.object({
   workmode: z
     .union([
       z.string(),
-      z.array(
-        z.enum([
-          WorkModeEnums.REMOTE,
-          WorkModeEnums.HYBRID,
-          WorkModeEnums.OFFICE,
-        ])
-      ),
+      z.array(z.enum(Object.values(WorkMode) as [string, ...string[]])),
     ])
     .optional()
     .transform((val) => {
@@ -92,16 +80,7 @@ export const JobQuerySchema = z.object({
   category: z
     .union([
       z.string(),
-      z.array(
-        z.enum([
-          CategoryEnums.DESIGN,
-          CategoryEnums.DEVELOPMENT,
-          CategoryEnums.MARKETING,
-          CategoryEnums.FINANCE,
-          CategoryEnums.SUPPORT,
-          CategoryEnums.MANAGEMENT,
-        ])
-      ),
+      z.array(z.enum(Object.values(Category) as [string, ...string[]])),
     ])
     .optional()
     .transform((val) => {
@@ -114,14 +93,7 @@ export const JobQuerySchema = z.object({
   type: z
     .union([
       z.string(),
-      z.array(
-        z.enum([
-          JobTypeEnums.FULLTIME,
-          JobTypeEnums.PARTTIME,
-          JobTypeEnums.CONTRACT,
-          JobTypeEnums.INTERNSHIP,
-        ])
-      ),
+      z.array(z.enum(Object.values(JobType) as [string, ...string[]])),
     ])
     .optional()
     .transform((val) => {
@@ -149,7 +121,9 @@ export const JobQuerySchema = z.object({
       }
       return val;
     }),
-  sortby: z.enum(['postedat_asc', 'postedat_desc']).default('postedat_desc'),
+  sortby: z
+    .enum(Object.values(SortBy) as [string, ...string[]])
+    .default(SortBy.POSTEDAT_DESC),
   page: z.coerce
     .number({ message: 'page must be a number' })
     .optional()

From 09361239566c9685fc6124206412a1970fba877f Mon Sep 17 00:00:00 2001
From: Deepanshu Mishra <d4deepanshu723@gmail.com>
Date: Wed, 4 Sep 2024 23:17:09 +0530
Subject: [PATCH 5/7] fix_build

---
 prisma/seed.ts              | 43 ++++++++++++++++++++++++++-----------
 src/layouts/job-filters.tsx | 41 +++++++++++++++++++----------------
 src/layouts/jobs-header.tsx |  4 ++--
 3 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/prisma/seed.ts b/prisma/seed.ts
index 81001261..dc68687d 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -2,16 +2,13 @@
 import { Currency, Role, WorkMode } from '@prisma/client';
 import bcrypt from 'bcryptjs';
 import prisma from '../src/config/prisma.config';
-import { JobLocations } from '@prisma/client';
 
 const users = [
   { id: '1', name: 'Jack', email: 'user@gmail.com' },
   { id: '2', name: 'Admin', email: 'admin@gmail.com', role: Role.ADMIN },
 ];
 
-const locationArr = Object.keys(JobLocations);
-
-let jobs = [
+const jobs = [
   {
     id: '1',
     userId: '1',
@@ -20,6 +17,7 @@ let jobs = [
     companyName: 'Tech Corp',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'New York',
     hasSalaryRange: true,
     minSalary: 60000,
     maxSalary: 80000,
@@ -33,6 +31,7 @@ let jobs = [
     companyName: 'Innovatech',
     workMode: WorkMode.office,
     currency: Currency.INR,
+    location: 'Bangalore',
     hasSalaryRange: false,
     minSalary: null,
     maxSalary: null,
@@ -46,6 +45,7 @@ let jobs = [
     companyName: 'Global Solutions',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'San Francisco',
     hasSalaryRange: true,
     minSalary: 90000,
     maxSalary: 120000,
@@ -60,6 +60,7 @@ let jobs = [
     companyName: 'DevOps Ltd.',
     workMode: WorkMode.remote,
     currency: Currency.INR,
+    location: 'Mumbai',
     hasSalaryRange: true,
     minSalary: 50000,
     maxSalary: 70000,
@@ -74,6 +75,7 @@ let jobs = [
     companyName: 'Productive Minds',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'Chicago',
     hasSalaryRange: true,
     minSalary: 110000,
     maxSalary: 150000,
@@ -88,6 +90,7 @@ let jobs = [
     companyName: 'Data Insights',
     workMode: WorkMode.office,
     currency: Currency.INR,
+    location: 'Hyderabad',
     hasSalaryRange: true,
     minSalary: 80000,
     maxSalary: 100000,
@@ -102,6 +105,7 @@ let jobs = [
     companyName: 'Creative Designs',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Seattle',
     hasSalaryRange: true,
     minSalary: 70000,
     maxSalary: 90000,
@@ -115,6 +119,7 @@ let jobs = [
     companyName: 'App Innovators',
     workMode: WorkMode.hybrid,
     currency: Currency.INR,
+    location: 'Delhi',
     hasSalaryRange: false,
     minSalary: null,
     maxSalary: null,
@@ -128,6 +133,7 @@ let jobs = [
     companyName: 'Cloud Works',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'Austin',
     hasSalaryRange: true,
     minSalary: 100000,
     maxSalary: 130000,
@@ -141,6 +147,7 @@ let jobs = [
     companyName: 'SecureTech',
     workMode: WorkMode.remote,
     currency: Currency.INR,
+    location: 'Pune',
     hasSalaryRange: true,
     minSalary: 75000,
     maxSalary: 95000,
@@ -154,6 +161,7 @@ let jobs = [
     companyName: 'QA Solutions',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Boston',
     hasSalaryRange: true,
     minSalary: 45000,
     maxSalary: 50000,
@@ -167,6 +175,7 @@ let jobs = [
     companyName: 'Tech Docs',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'San Diego',
     hasSalaryRange: true,
     minSalary: 30000,
     maxSalary: 35000,
@@ -180,6 +189,7 @@ let jobs = [
     companyName: 'Support Corp',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'Dallas',
     hasSalaryRange: true,
     minSalary: 20000,
     maxSalary: 25000,
@@ -193,6 +203,7 @@ let jobs = [
     companyName: 'Net Admins',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Houston',
     hasSalaryRange: true,
     minSalary: 35000,
     maxSalary: 40000,
@@ -206,6 +217,7 @@ let jobs = [
     companyName: 'Sys Solutions',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'Miami',
     hasSalaryRange: true,
     minSalary: 27000,
     maxSalary: 32000,
@@ -219,6 +231,7 @@ let jobs = [
     companyName: 'Sales Tech',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'Chicago',
     hasSalaryRange: true,
     minSalary: 30000,
     maxSalary: 35000,
@@ -232,6 +245,7 @@ let jobs = [
     companyName: 'Market Pro',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Los Angeles',
     hasSalaryRange: true,
     minSalary: 20000,
     maxSalary: 25000,
@@ -245,6 +259,7 @@ let jobs = [
     companyName: 'Content Creators',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'New York',
     hasSalaryRange: true,
     minSalary: 25000,
     maxSalary: 30000,
@@ -258,6 +273,7 @@ let jobs = [
     companyName: 'Design Pros',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'San Francisco',
     hasSalaryRange: true,
     minSalary: 22000,
     maxSalary: 27000,
@@ -271,6 +287,7 @@ let jobs = [
     companyName: 'Business Solutions',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Seattle',
     hasSalaryRange: true,
     minSalary: 38000,
     maxSalary: 43000,
@@ -284,6 +301,7 @@ let jobs = [
     companyName: 'SEO Experts',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'Denver',
     hasSalaryRange: true,
     minSalary: 15000,
     maxSalary: 20000,
@@ -297,6 +315,7 @@ let jobs = [
     companyName: 'DataPro',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'Atlanta',
     hasSalaryRange: true,
     minSalary: 23000,
     maxSalary: 28000,
@@ -310,6 +329,7 @@ let jobs = [
     companyName: 'OpsCorp',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Phoenix',
     hasSalaryRange: true,
     minSalary: 29000,
     maxSalary: 34000,
@@ -323,6 +343,7 @@ let jobs = [
     companyName: 'Customer Care Inc.',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'Orlando',
     hasSalaryRange: true,
     minSalary: 26000,
     maxSalary: 31000,
@@ -336,6 +357,7 @@ let jobs = [
     companyName: 'Product Innovators',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'Portland',
     hasSalaryRange: true,
     minSalary: 32000,
     maxSalary: 37000,
@@ -349,6 +371,7 @@ let jobs = [
     companyName: 'Social Media Pros',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Las Vegas',
     hasSalaryRange: true,
     minSalary: 18000,
     maxSalary: 23000,
@@ -362,6 +385,7 @@ let jobs = [
     companyName: 'HR Hub',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'Charlotte',
     hasSalaryRange: true,
     minSalary: 24000,
     maxSalary: 29000,
@@ -375,6 +399,7 @@ let jobs = [
     companyName: 'Supply Chain Solutions',
     workMode: WorkMode.office,
     currency: Currency.USD,
+    location: 'Detroit',
     hasSalaryRange: true,
     minSalary: 30000,
     maxSalary: 35000,
@@ -388,6 +413,7 @@ let jobs = [
     companyName: 'E-commerce Pros',
     workMode: WorkMode.remote,
     currency: Currency.USD,
+    location: 'Philadelphia',
     hasSalaryRange: true,
     minSalary: 27000,
     maxSalary: 32000,
@@ -401,6 +427,7 @@ let jobs = [
     companyName: 'Project Managers Inc.',
     workMode: WorkMode.hybrid,
     currency: Currency.USD,
+    location: 'Nashville',
     hasSalaryRange: true,
     minSalary: 12000,
     maxSalary: 17000,
@@ -437,13 +464,6 @@ async function seedUsers() {
 }
 
 async function seedJobs() {
-  jobs = jobs.map((j, index) => {
-    return {
-      ...j,
-      location:
-        locationArr[index] !== undefined ? locationArr[index] : locationArr[3],
-    };
-  });
   try {
     await Promise.all(
       jobs.map(async (j) =>
@@ -457,7 +477,6 @@ async function seedJobs() {
             companyName: j.companyName,
             workMode: j.workMode,
             currency: j.currency,
-            //@ts-ignore
             location: j.location,
             hasSalaryRange: j.hasSalaryRange,
             minSalary: j.minSalary,
diff --git a/src/layouts/job-filters.tsx b/src/layouts/job-filters.tsx
index bce63fa1..8df89cc2 100644
--- a/src/layouts/job-filters.tsx
+++ b/src/layouts/job-filters.tsx
@@ -1,12 +1,11 @@
 'use client';
-import { filters } from '@/lib/constant/jobs.constant';
+import { filters, WorkMode } from '@/lib/constant/jobs.constant';
 import {
   JobQuerySchema,
   JobQuerySchemaType,
 } from '@/lib/validators/jobs.validator';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import { JobLocations } from '@prisma/client';
 import {
   Accordion,
   AccordionContent,
@@ -27,8 +26,6 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { cn } from '@/lib/utils';
 import useSetQueryParams from '@/hooks/useSetQueryParams';
 import { useEffect } from 'react';
-import { WorkMode } from '@prisma/client';
-import _ from 'lodash';
 
 const JobFilters = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
   const setQueryParams = useSetQueryParams();
@@ -82,36 +79,38 @@ const JobFilters = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
                     name="workmode"
                     render={() => (
                       <FormItem>
-                        {Object.keys(WorkMode).map((item, index) => (
+                        {filters.workMode.map((item) => (
                           <FormField
-                            key={index}
+                            key={item.id}
                             control={form.control}
                             name="workmode"
                             render={({ field }) => {
                               return (
                                 <FormItem
-                                  key={index}
+                                  key={item.id}
                                   className="flex items-center space-x-3 space-y-0"
                                 >
                                   <FormControl>
                                     <Checkbox
-                                      checked={field.value?.includes(item)}
+                                      checked={field.value?.includes(
+                                        item.value as WorkMode
+                                      )}
                                       onCheckedChange={(checked) => {
                                         checked
                                           ? field.onChange([
                                               ...(field.value || []),
-                                              item,
+                                              item.value,
                                             ])
                                           : field.onChange(
                                               field.value?.filter(
-                                                (value) => value !== item
+                                                (value) => value !== item.value
                                               )
                                             );
                                       }}
                                     />
                                   </FormControl>
                                   <FormLabel className="text-sm font-normal">
-                                    {_.startCase(item)}
+                                    {item.label}
                                   </FormLabel>
                                 </FormItem>
                               );
@@ -188,30 +187,34 @@ const JobFilters = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
                     name="location"
                     render={() => (
                       <FormItem className="flex flex-wrap gap-2 space-y-0">
-                        {Object.keys(JobLocations).map((item, index) => (
+                        {filters.location.map((item) => (
                           <FormField
-                            key={index}
+                            key={item.id}
                             control={form.control}
                             name="location"
                             render={({ field }) => {
                               return (
                                 <FormItem
-                                  key={index}
+                                  key={item.id}
                                   className="flex items-center space-y-0 group"
-                                  aria-checked={field.value?.includes(item)}
+                                  aria-checked={field.value?.includes(
+                                    item.value
+                                  )}
                                 >
                                   <FormControl>
                                     <Checkbox
-                                      checked={field.value?.includes(item)}
+                                      checked={field.value?.includes(
+                                        item.value
+                                      )}
                                       onCheckedChange={(checked) => {
                                         checked
                                           ? field.onChange([
                                               ...(field.value || []),
-                                              item,
+                                              item.value,
                                             ])
                                           : field.onChange(
                                               field.value?.filter(
-                                                (value) => value !== item
+                                                (value) => value !== item.value
                                               )
                                             );
                                       }}
@@ -219,7 +222,7 @@ const JobFilters = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
                                     />
                                   </FormControl>
                                   <FormLabel className="text-primary-text font-normal text-xs cursor-pointer group-aria-checked:bg-primary group-aria-checked:text-primary-foreground flex items-center justify-start py-2 px-4 rounded-full border">
-                                    {_.startCase(item.toLowerCase())}
+                                    {item.label}
                                   </FormLabel>
                                 </FormItem>
                               );
diff --git a/src/layouts/jobs-header.tsx b/src/layouts/jobs-header.tsx
index 213ee13e..0a62947f 100644
--- a/src/layouts/jobs-header.tsx
+++ b/src/layouts/jobs-header.tsx
@@ -11,7 +11,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
-import { jobSorting, SortByEnums } from '@/lib/constant/jobs.constant';
+import { jobSorting, SortBy } from '@/lib/constant/jobs.constant';
 import { JobQuerySchemaType } from '@/lib/validators/jobs.validator';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
@@ -49,7 +49,7 @@ const JobsHeader = ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
   });
   const formValues = form.watch();
 
-  function sortChangeHandler(value: SortByEnums) {
+  function sortChangeHandler(value: SortBy) {
     setQueryParams({ sortby: value, page: 1 });
   }
 

From 97ecd48d0d857669da4d8fccd8fd770c9686f93d Mon Sep 17 00:00:00 2001
From: Deepanshu Mishra <d4deepanshu723@gmail.com>
Date: Thu, 5 Sep 2024 12:39:53 +0530
Subject: [PATCH 6/7] fix_build_issue

---
 prisma/schema.prisma | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 29409066..115d6628 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -26,7 +26,7 @@ model Job {
   companyName    String   @map("company_name")
   workMode       WorkMode @map("work_mode")
   currency       Currency @default(INR)
-  location       JobLocations
+  location       String
   hasSalaryRange Boolean  @default(false) @map("has_salary_range")
   minSalary      Int?
   maxSalary      Int?
@@ -52,15 +52,4 @@ enum Role {
   ADMIN
 }
 
-enum JobLocations {
-  BANGLORE
-  DELHI
-  MUMBAI
-  PUNE
-  CHENNAI
-  HYDERABAD
-  KOLKATA
-  AHMEDABAD
-  JAIPUR
-  SURAT
-}
+

From 96a6ba7e602951c98e782bdcaf075c75f316c548 Mon Sep 17 00:00:00 2001
From: Deepanshu Mishra <d4deepanshu723@gmail.com>
Date: Thu, 5 Sep 2024 12:42:01 +0530
Subject: [PATCH 7/7] fix_build_issue

---
 prisma/migrations/20240905070545_/migration.sql | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 prisma/migrations/20240905070545_/migration.sql

diff --git a/prisma/migrations/20240905070545_/migration.sql b/prisma/migrations/20240905070545_/migration.sql
new file mode 100644
index 00000000..9a2d4ada
--- /dev/null
+++ b/prisma/migrations/20240905070545_/migration.sql
@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - Changed the type of `location` on the `Job` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
+
+*/
+-- AlterTable
+ALTER TABLE "Job" DROP COLUMN "location",
+ADD COLUMN     "location" TEXT NOT NULL;
+
+-- DropEnum
+DROP TYPE "JobLocations";