ts ki mkc
This commit is contained in:
Om Lanke
@@ -15,7 +15,7 @@ export default async function JobDetailPage({ params }: JobPageProps) {
|
||||
if (isNaN(jobId)) notFound();
|
||||
|
||||
const jobRes = await db.select().from(jobs).where(eq(jobs.id, jobId)).limit(1);
|
||||
if (jobRes.length === 0) notFound();
|
||||
if (jobRes.length === 0 || !jobRes[0]) notFound();
|
||||
const job = jobRes[0];
|
||||
|
||||
const companyRes = await db.select().from(companies).where(eq(companies.id, job.companyId)).limit(1);
|
||||
|
||||
53
apps/admin/app/(main)/jobs/new/actions.ts
Normal file
53
apps/admin/app/(main)/jobs/new/actions.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
'use server';
|
||||
import { db, companies, jobs } from '@workspace/db';
|
||||
|
||||
export async function createJob(formData: FormData) {
|
||||
const companyIdRaw = formData.get('companyId');
|
||||
const companyId = companyIdRaw ? Number(companyIdRaw) : undefined;
|
||||
const title = String(formData.get('title') ?? '').trim();
|
||||
const link = String(formData.get('link') ?? '').trim();
|
||||
const description = String(formData.get('description') ?? '').trim() || 'N/A';
|
||||
const location = String(formData.get('location') ?? '').trim() || 'N/A';
|
||||
const imageURL =
|
||||
String(formData.get('imageURL') ?? '').trim() || 'https://via.placeholder.com/100x100?text=Job';
|
||||
const salary = String(formData.get('salary') ?? '').trim() || 'N/A';
|
||||
const deadlineRaw = formData.get('applicationDeadline');
|
||||
const applicationDeadline = deadlineRaw ? new Date(String(deadlineRaw)) : new Date();
|
||||
const minCGPA = formData.get('minCGPA') !== null ? String(formData.get('minCGPA')) : '0';
|
||||
const minSSC = formData.get('minSSC') !== null ? String(formData.get('minSSC')) : '0';
|
||||
const minHSC = formData.get('minHSC') !== null ? String(formData.get('minHSC')) : '0';
|
||||
const allowDeadKT = formData.get('allowDeadKT') === 'on' || formData.get('allowDeadKT') === 'true';
|
||||
const allowLiveKT = formData.get('allowLiveKT') === 'on' || formData.get('allowLiveKT') === 'true';
|
||||
|
||||
if (!companyId || !title) return { error: 'Company and title are required.' };
|
||||
|
||||
await db.insert(jobs).values({
|
||||
companyId,
|
||||
title,
|
||||
link,
|
||||
description,
|
||||
location,
|
||||
imageURL,
|
||||
salary,
|
||||
applicationDeadline,
|
||||
active: true,
|
||||
minCGPA,
|
||||
minSSC,
|
||||
minHSC,
|
||||
allowDeadKT,
|
||||
allowLiveKT,
|
||||
});
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function createCompany(formData: FormData) {
|
||||
const name = String(formData.get('name') ?? '').trim();
|
||||
const email = String(formData.get('email') ?? '').trim();
|
||||
const link = String(formData.get('link') ?? '').trim();
|
||||
const description = String(formData.get('description') ?? '').trim();
|
||||
const imageURL = String(formData.get('imageURL') ?? '').trim() || 'https://via.placeholder.com/100x100?text=Company';
|
||||
if (!name || !email || !link || !description) return { error: 'All fields are required.' };
|
||||
const [inserted] = await db.insert(companies).values({ name, email, link, description, imageURL }).returning();
|
||||
if (!inserted) return { error: 'Failed to add company.' };
|
||||
return { success: true, company: { id: inserted.id, name: inserted.name } };
|
||||
}
|
||||
31
apps/admin/app/(main)/jobs/new/loading.tsx
Normal file
31
apps/admin/app/(main)/jobs/new/loading.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Skeleton } from '@workspace/ui/components/skeleton';
|
||||
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="w-full max-w-2xl px-4">
|
||||
<div className="rounded-lg bg-white shadow p-8">
|
||||
<Skeleton className="h-8 w-1/2 mb-8 mx-auto" />
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-20 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
</div>
|
||||
<div className="flex gap-6">
|
||||
<Skeleton className="h-5 w-24" />
|
||||
<Skeleton className="h-5 w-24" />
|
||||
</div>
|
||||
<Skeleton className="h-10 w-full mt-6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
366
apps/admin/app/(main)/jobs/new/new-job-form.tsx
Normal file
366
apps/admin/app/(main)/jobs/new/new-job-form.tsx
Normal file
@@ -0,0 +1,366 @@
|
||||
'use client';
|
||||
import { useState, useTransition } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { Input } from '@workspace/ui/components/input';
|
||||
import { Textarea } from '@workspace/ui/components/textarea';
|
||||
import { Button } from '@workspace/ui/components/button';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@workspace/ui/components/form';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@workspace/ui/components/select';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
|
||||
import { jobSchema, JobFormData } from './schema';
|
||||
import { createJob, createCompany } from './actions';
|
||||
import { Popover, PopoverTrigger, PopoverContent } from '@workspace/ui/components/popover';
|
||||
import { Calendar } from '@workspace/ui/components/calendar';
|
||||
import { format } from 'date-fns';
|
||||
import { Calendar as CalendarIcon } from 'lucide-react';
|
||||
import { cn } from '@workspace/ui/lib/utils';
|
||||
|
||||
function NewJobForm({ companies }: { companies: { id: number; name: string }[] }) {
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [addingCompany, setAddingCompany] = useState(false);
|
||||
const [companyList, setCompanyList] = useState(companies);
|
||||
const [newCompanyName, setNewCompanyName] = useState('');
|
||||
const [newCompanyEmail, setNewCompanyEmail] = useState('');
|
||||
const [newCompanyLink, setNewCompanyLink] = useState('');
|
||||
const [newCompanyDescription, setNewCompanyDescription] = useState('');
|
||||
const [newCompanyImageURL, setNewCompanyImageURL] = useState('');
|
||||
const [companyError, setCompanyError] = useState<string | null>(null);
|
||||
const form = useForm<JobFormData>({
|
||||
resolver: zodResolver(jobSchema),
|
||||
defaultValues: {
|
||||
companyId: companies[0]?.id ?? 0,
|
||||
title: '',
|
||||
link: '',
|
||||
description: '',
|
||||
location: '',
|
||||
imageURL: '',
|
||||
salary: '',
|
||||
applicationDeadline: new Date(),
|
||||
minCGPA: 0,
|
||||
minSSC: 0,
|
||||
minHSC: 0,
|
||||
allowDeadKT: true,
|
||||
allowLiveKT: true,
|
||||
},
|
||||
});
|
||||
|
||||
async function handleSubmit(formData: FormData) {
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
startTransition(async () => {
|
||||
const result = await createJob(formData);
|
||||
if (result?.success) {
|
||||
setSuccess(true);
|
||||
form.reset(form.formState.defaultValues);
|
||||
} else {
|
||||
setError(result?.error || 'Failed to create job');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function handleAddCompany(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setCompanyError(null);
|
||||
if (!newCompanyName.trim() || !newCompanyEmail.trim() || !newCompanyLink.trim() || !newCompanyDescription.trim()) return;
|
||||
setAddingCompany(true);
|
||||
const formData = new FormData();
|
||||
formData.append('name', newCompanyName.trim());
|
||||
formData.append('email', newCompanyEmail.trim());
|
||||
formData.append('link', newCompanyLink.trim());
|
||||
formData.append('description', newCompanyDescription.trim());
|
||||
formData.append('imageURL', newCompanyImageURL.trim());
|
||||
const result = await createCompany(formData);
|
||||
if (result?.success && result.company) {
|
||||
setCompanyList((prev) => [...prev, result.company]);
|
||||
form.setValue('companyId', result.company.id);
|
||||
setNewCompanyName('');
|
||||
setNewCompanyEmail('');
|
||||
setNewCompanyLink('');
|
||||
setNewCompanyDescription('');
|
||||
setNewCompanyImageURL('');
|
||||
setShowModal(false);
|
||||
} else {
|
||||
setCompanyError(result?.error || 'Failed to add company');
|
||||
}
|
||||
setAddingCompany(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-8">
|
||||
<div className="max-w-2xl mx-auto px-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl font-bold text-center">Create a New Job</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...form}>
|
||||
<form action={handleSubmit} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="companyId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Company *</FormLabel>
|
||||
<Select onValueChange={(val) => field.onChange(val)} value={String(field.value || '')}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select company" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{companies.map((c) => (
|
||||
<SelectItem key={c.id} value={String(c.id)}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Title *</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Job title" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="link"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Job Link *</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="https://company.com/job" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Description *</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea placeholder="Job description" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="location"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Location *</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Location" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="imageURL"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Image URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="https://..." {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="salary"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Salary *</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Salary" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="applicationDeadline"
|
||||
render={({ field }) => {
|
||||
const getDisplayDate = (value: string) => {
|
||||
if (!value) return '';
|
||||
try {
|
||||
return format(new Date(value), 'PPP');
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
};
|
||||
const selectedDate = field.value ? new Date(field.value) : undefined;
|
||||
// Use a local handler to ensure immediate update
|
||||
const handleSelect = (date: Date | undefined) => {
|
||||
// Use setTimeout to ensure the onChange is processed after popover closes
|
||||
setTimeout(() => {
|
||||
if (date) {
|
||||
field.onChange(date.toISOString().slice(0, 10));
|
||||
} else {
|
||||
field.onChange('');
|
||||
}
|
||||
}, 0);
|
||||
};
|
||||
return (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Application Deadline *</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-[240px] pl-3 text-left font-normal",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
type="button"
|
||||
>
|
||||
{getDisplayDate(typeof field.value === 'string' ? field.value : '') || <span>Pick a date</span>}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={selectedDate}
|
||||
onSelect={handleSelect}
|
||||
captionLayout="dropdown"
|
||||
key={typeof field.value === 'string' ? field.value : 'empty'}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="minCGPA"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Min CGPA</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" step="0.01" placeholder="0" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="minSSC"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Min SSC %</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" step="0.01" placeholder="0" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="minHSC"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Min HSC %</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" step="0.01" placeholder="0" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="allowDeadKT"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Allow Dead KT</FormLabel>
|
||||
<FormControl>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.value}
|
||||
onChange={(e) => field.onChange(e.target.checked)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="allowLiveKT"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Allow Live KT</FormLabel>
|
||||
<FormControl>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.value}
|
||||
onChange={(e) => field.onChange(e.target.checked)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{success && <div className="text-green-600">Job created successfully!</div>}
|
||||
{error && <div className="text-red-600">{error}</div>}
|
||||
<Button type="submit" disabled={isPending}>
|
||||
{isPending ? 'Creating...' : 'Create Job'}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NewJobForm;
|
||||
7
apps/admin/app/(main)/jobs/new/page.tsx
Normal file
7
apps/admin/app/(main)/jobs/new/page.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import { db, companies } from '@workspace/db';
|
||||
import NewJobForm from './new-job-form';
|
||||
|
||||
export default async function NewJobPage() {
|
||||
const companyList = await db.select().from(companies);
|
||||
return <NewJobForm companies={companyList.map((c) => ({ id: c.id, name: c.name }))} />;
|
||||
}
|
||||
19
apps/admin/app/(main)/jobs/new/schema.ts
Normal file
19
apps/admin/app/(main)/jobs/new/schema.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import * as z from 'zod';
|
||||
|
||||
export const jobSchema = z.object({
|
||||
companyId: z.number().min(1, 'Company is required'),
|
||||
title: z.string().min(1, 'Title is required'),
|
||||
link: z.string().url('Invalid URL'),
|
||||
description: z.string().min(1, 'Description is required'),
|
||||
location: z.string().min(1, 'Location is required'),
|
||||
imageURL: z.string().url('Invalid URL'),
|
||||
salary: z.string().min(1, 'Salary is required'),
|
||||
applicationDeadline: z.date(),
|
||||
minCGPA: z.number().min(0),
|
||||
minSSC: z.number().min(0),
|
||||
minHSC: z.number().min(0),
|
||||
allowDeadKT: z.boolean(),
|
||||
allowLiveKT: z.boolean(),
|
||||
});
|
||||
|
||||
export type JobFormData = z.infer<typeof jobSchema>;
|
||||
@@ -7,12 +7,9 @@ import { Button } from '@workspace/ui/components/button';
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
async function getAllJobsWithCompany() {
|
||||
const allJobs = await db.select().from(jobs);
|
||||
const allCompanies = await db.select().from(companies);
|
||||
return allJobs.map(job => ({
|
||||
...job,
|
||||
company: allCompanies.find(c => c.id === job.companyId) || null,
|
||||
}));
|
||||
return await db.query.jobs.findMany({
|
||||
with: { company: true },
|
||||
});
|
||||
}
|
||||
|
||||
export default async function JobsListPage() {
|
||||
|
||||
@@ -8,7 +8,7 @@ const navLinks = [
|
||||
|
||||
export default function MainLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#f8fafc] font-sans">
|
||||
<div className="min-h-screen bg-background font-sans">
|
||||
{/* Sticky top navbar */}
|
||||
<header className="sticky top-0 z-30 w-full bg-[#1e293b] shadow-lg">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between px-6 py-3">
|
||||
@@ -30,7 +30,9 @@ export default function MainLayout({ children }: { children: React.ReactNode })
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main className="max-w-7xl mx-auto px-4 py-8 md:py-12 bg-[#f8fafc] min-h-screen">{children}</main>
|
||||
<main className="max-w-7xl mx-auto px-4 py-8 md:py-12 bg-background min-h-screen">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@workspace/ui/components/card';
|
||||
import {
|
||||
Card, CardContent, CardFooter, CardHeader, CardTitle,
|
||||
} from '@workspace/ui/components/card';
|
||||
import { Input } from '@workspace/ui/components/input';
|
||||
import { Textarea } from '@workspace/ui/components/textarea';
|
||||
import { Button } from '@workspace/ui/components/button';
|
||||
import Link from 'next/link';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { db, companies, jobs } from '@workspace/db';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription } from '@workspace/ui/components/dialog';
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@workspace/ui/components/accordion';
|
||||
import { Badge } from '@workspace/ui/components/badge';
|
||||
|
||||
// -----------------------
|
||||
// Server Actions
|
||||
// -----------------------
|
||||
import Link from 'next/link';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { db, companies, jobs } from '@workspace/db';
|
||||
|
||||
async function createCompany(formData: FormData) {
|
||||
'use server';
|
||||
@@ -19,7 +17,9 @@ async function createCompany(formData: FormData) {
|
||||
const email = String(formData.get('email') ?? '').trim();
|
||||
const link = String(formData.get('link') ?? '').trim();
|
||||
const description = String(formData.get('description') ?? '').trim() || 'N/A';
|
||||
const imageURL = String(formData.get('imageURL') ?? '').trim() || 'https://via.placeholder.com/200x200?text=Company';
|
||||
const imageURL =
|
||||
String(formData.get('imageURL') ?? '').trim() ||
|
||||
'https://via.placeholder.com/200x200?text=Company';
|
||||
|
||||
if (!name) return;
|
||||
|
||||
@@ -34,7 +34,9 @@ async function createJob(formData: FormData) {
|
||||
const link = String(formData.get('jobLink') ?? '').trim();
|
||||
const description = String(formData.get('jobDescription') ?? '').trim() || 'N/A';
|
||||
const location = String(formData.get('location') ?? '').trim() || 'N/A';
|
||||
const imageURL = String(formData.get('jobImageURL') ?? '').trim() || 'https://via.placeholder.com/100x100?text=Job';
|
||||
const imageURL =
|
||||
String(formData.get('jobImageURL') ?? '').trim() ||
|
||||
'https://via.placeholder.com/100x100?text=Job';
|
||||
const salary = String(formData.get('salary') ?? '').trim() || 'N/A';
|
||||
const deadlineRaw = formData.get('deadline');
|
||||
const applicationDeadline = deadlineRaw ? new Date(String(deadlineRaw)) : new Date();
|
||||
@@ -55,103 +57,62 @@ async function createJob(formData: FormData) {
|
||||
revalidatePath('/');
|
||||
}
|
||||
|
||||
// -----------------------
|
||||
// Component Helpers
|
||||
// -----------------------
|
||||
|
||||
async function getDashboardData() {
|
||||
const comps = await db.select().from(companies);
|
||||
const allJobs = await db.select().from(jobs);
|
||||
|
||||
return comps.map((comp) => ({
|
||||
...comp,
|
||||
jobs: allJobs.filter((j) => j.companyId === comp.id),
|
||||
}));
|
||||
return await db.query.companies.findMany({ with: { jobs: true } });
|
||||
}
|
||||
|
||||
export default async function DashboardPage() {
|
||||
const data = await getDashboardData();
|
||||
|
||||
return (
|
||||
<div className="space-y-12">
|
||||
<section className="flex flex-col md:flex-row md:justify-between md:items-center gap-6 md:gap-0">
|
||||
<div>
|
||||
<h1 className="text-4xl font-extrabold text-blue-700 tracking-tight mb-1">Companies Dashboard</h1>
|
||||
<p className="text-gray-500 text-lg">Manage companies and their job openings.</p>
|
||||
</div>
|
||||
<div className="space-y-16 px-4 md:px-16 py-8 bg-white min-h-screen">
|
||||
<section className="flex justify-between items-center">
|
||||
<h1 className="text-3xl font-bold text-gray-800">Companies Dashboard</h1>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button className="bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg hover:from-blue-600 hover:to-purple-600 transition">Add New Company</Button>
|
||||
<Button>Add New Company</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add a new company</DialogTitle>
|
||||
<DialogDescription>
|
||||
Fill in the details below to add a new company to the portal.
|
||||
</DialogDescription>
|
||||
<DialogDescription>Fill in the details below to add a new company.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form action={createCompany} className="grid grid-cols-1 gap-4 py-4">
|
||||
<form action={createCompany} className="grid gap-4 py-4">
|
||||
<Input name="name" placeholder="Company name" required />
|
||||
<Input name="email" placeholder="Contact email" type="email" required />
|
||||
<Input name="link" placeholder="Website / careers link" />
|
||||
<Input name="imageURL" placeholder="Image URL" />
|
||||
<Textarea name="description" placeholder="Short description" />
|
||||
<Button type="submit" className="w-fit bg-blue-600 text-white hover:bg-blue-700">Add Company</Button>
|
||||
<Button type="submit">Add Company</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</section>
|
||||
|
||||
<section className="space-y-8">
|
||||
{data.length === 0 && <Card className="p-10 text-gray-400 text-center shadow-lg border border-gray-200 bg-white">No companies yet. Add your first company to get started!</Card>}
|
||||
|
||||
<div className="grid gap-10 md:grid-cols-2 lg:grid-cols-3">
|
||||
{data.map((company) => (
|
||||
<Card key={company.id} className="flex flex-col shadow-xl border-l-8 border-blue-400 border border-gray-200 bg-white rounded-2xl overflow-hidden">
|
||||
<CardHeader className="p-6 pb-2 flex flex-row items-center gap-4">
|
||||
<img src={company.imageURL} alt={company.name} className="w-16 h-16 rounded-xl border-2 border-blue-200 object-cover shadow" />
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-xl text-blue-700">{company.name}</h3>
|
||||
<a href={company.link} target="_blank" rel="noopener noreferrer" className="text-sm text-blue-500 hover:underline">{company.link}</a>
|
||||
<section className="space-y-12">
|
||||
{data.map((company) => (
|
||||
<div key={company.id} className="space-y-4">
|
||||
<h2 className="text-xl font-semibold text-gray-700">{company.name}</h2>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{company.jobs.length > 0 ? (
|
||||
company.jobs.map((job) => (
|
||||
<Card key={job.id} className="w-48 p-4 border border-gray-200 bg-gray-50">
|
||||
<CardContent className="space-y-1">
|
||||
<div className="text-md font-medium text-gray-800 truncate">{job.title}</div>
|
||||
<div className="text-sm text-gray-500 truncate">{job.location}</div>
|
||||
<div className="text-sm text-gray-400 truncate">{job.salary}</div>
|
||||
<div className={`text-xs mt-2 px-2 py-1 rounded ${job.active ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-500'}`}>{job.active ? 'Active' : 'Inactive'}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<div className="w-48 h-24 flex items-center justify-center text-sm text-gray-400 border border-dashed border-gray-300">
|
||||
No jobs
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-6 pb-2 space-y-3">
|
||||
<div className="text-gray-500 text-sm mb-2">{company.description}</div>
|
||||
<h4 className="font-semibold text-gray-700 mb-1">Open Positions</h4>
|
||||
{company.jobs.length === 0 && <p className="text-sm text-gray-400">No jobs yet.</p>}
|
||||
<div className="flex flex-col gap-2">
|
||||
{company.jobs.map((job) => (
|
||||
<Link key={job.id} href={`/jobs/${job.id}`} className="flex justify-between items-center p-3 rounded-lg hover:bg-blue-50 transition-colors border border-transparent hover:border-blue-200">
|
||||
<span className="font-medium text-gray-800">{job.title}</span>
|
||||
<Badge variant={job.active ? "secondary" : "outline"} className={job.active ? 'bg-blue-100 text-blue-700 border-blue-200' : 'bg-gray-100 text-gray-500 border-gray-200'}>{job.active ? "Active" : "Inactive"}</Badge>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="mt-auto p-0">
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
<AccordionItem value="add-job">
|
||||
<AccordionTrigger className="px-6 text-blue-700 hover:text-blue-900 font-semibold">
|
||||
Add New Job
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="p-6 bg-blue-50 border-t border-blue-100">
|
||||
<form action={createJob} className="flex flex-col w-full gap-3">
|
||||
<input type="hidden" name="companyId" value={company.id} />
|
||||
<Input name="title" placeholder="Job title" required />
|
||||
<Input name="jobLink" placeholder="Job link" />
|
||||
<Input name="location" placeholder="Location" />
|
||||
<Input name="salary" placeholder="Salary" />
|
||||
<Input name="deadline" type="date" />
|
||||
<Textarea name="jobDescription" placeholder="Job description" />
|
||||
<Button type="submit" size="sm" className="bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600 transition self-start">Add Job</Button>
|
||||
</form>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -12,10 +12,12 @@
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^5.1.1",
|
||||
"@tailwindcss/postcss": "^4.0.8",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"@workspace/db": "workspace:*",
|
||||
"@workspace/ui": "workspace:*",
|
||||
"date-fns": "^4.1.0",
|
||||
"framer-motion": "^12.22.0",
|
||||
"lucide-react": "^0.475.0",
|
||||
"next": "^15.3.4",
|
||||
@@ -23,6 +25,7 @@
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-hook-form": "^7.59.0",
|
||||
"tailwindcss": "^4.0.8",
|
||||
"zod": "^3.25.67"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user