dashboard and new jobs page
This commit is contained in:
Om Lanke
@@ -1,57 +1,62 @@
|
||||
'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';
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
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 } from "@workspace/ui/components/card"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@workspace/ui/components/dialog"
|
||||
import { Checkbox } from "@workspace/ui/components/checkbox"
|
||||
import { jobSchema, type 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 {
|
||||
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';
|
||||
CalendarIcon,
|
||||
Plus,
|
||||
Building2,
|
||||
Briefcase,
|
||||
MapPin,
|
||||
DollarSign,
|
||||
GraduationCap,
|
||||
CheckCircle,
|
||||
AlertCircle,
|
||||
LinkIcon,
|
||||
} from "lucide-react"
|
||||
import { cn } from "@workspace/ui/lib/utils"
|
||||
import { Alert, AlertDescription } from "@workspace/ui/components/alert"
|
||||
|
||||
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 [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: '',
|
||||
title: "",
|
||||
link: "",
|
||||
description: "",
|
||||
location: "",
|
||||
imageURL: "",
|
||||
salary: "",
|
||||
applicationDeadline: new Date(),
|
||||
minCGPA: 0,
|
||||
minSSC: 0,
|
||||
@@ -59,200 +64,299 @@ function NewJobForm({ companies }: { companies: { id: number; name: string }[] }
|
||||
allowDeadKT: true,
|
||||
allowLiveKT: true,
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
async function handleSubmit(formData: FormData) {
|
||||
setError(null);
|
||||
setSuccess(false);
|
||||
setError(null)
|
||||
setSuccess(false)
|
||||
startTransition(async () => {
|
||||
const result = await createJob(formData);
|
||||
const result = await createJob(formData)
|
||||
if (result?.success) {
|
||||
setSuccess(true);
|
||||
form.reset(form.formState.defaultValues);
|
||||
setSuccess(true)
|
||||
form.reset(form.formState.defaultValues)
|
||||
} else {
|
||||
setError(result?.error || 'Failed to create job');
|
||||
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');
|
||||
e.preventDefault()
|
||||
setCompanyError(null)
|
||||
|
||||
if (!newCompanyName.trim() || !newCompanyEmail.trim() || !newCompanyLink.trim() || !newCompanyDescription.trim()) {
|
||||
setCompanyError("Please fill in all required fields")
|
||||
return
|
||||
}
|
||||
setAddingCompany(false);
|
||||
|
||||
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>
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 p-8">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
|
||||
<Briefcase className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">Create New Job Listing</h1>
|
||||
<p className="text-gray-600">Fill in the details below to post a new job opportunity</p>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
|
||||
<CardContent className="p-8">
|
||||
<Form {...form}>
|
||||
<form action={handleSubmit} className="space-y-6">
|
||||
<form action={handleSubmit} className="space-y-8">
|
||||
{/* Success/Error Messages */}
|
||||
{success && (
|
||||
<Alert className="border-green-200 bg-green-50">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<AlertDescription className="text-green-800">
|
||||
Job created successfully! You can create another one or go back to the dashboard.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<Alert className="border-red-200 bg-red-50">
|
||||
<AlertCircle className="h-4 w-4 text-red-600" />
|
||||
<AlertDescription className="text-red-800">{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* Company Selection Section */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-2 pb-2 border-b border-gray-200">
|
||||
<Building2 className="w-5 h-5 text-blue-600" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">Company Information</h2>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="companyId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Company *</FormLabel>
|
||||
<Select onValueChange={(val) => field.onChange(val)} value={String(field.value || '')}>
|
||||
<FormLabel className="text-sm font-medium text-gray-700">Select Company *</FormLabel>
|
||||
<div className="flex gap-2">
|
||||
<Select
|
||||
onValueChange={(val) => field.onChange(Number(val))}
|
||||
value={String(field.value || "")}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select company" />
|
||||
<SelectTrigger className="flex-1">
|
||||
<SelectValue placeholder="Choose a company" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{companies.map((c) => (
|
||||
{companyList.map((c) => (
|
||||
<SelectItem key={c.id} value={String(c.id)}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Dialog open={showModal} onOpenChange={setShowModal}>
|
||||
<DialogTrigger asChild>
|
||||
<Button type="button" variant="outline" size="icon" className="shrink-0 bg-transparent">
|
||||
<Plus className="w-4 h-4" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Building2 className="w-5 h-5" />
|
||||
Add New Company
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleAddCompany} className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Company Name *</label>
|
||||
<Input
|
||||
value={newCompanyName}
|
||||
onChange={(e) => setNewCompanyName(e.target.value)}
|
||||
placeholder="Enter company name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Contact Email *</label>
|
||||
<Input
|
||||
value={newCompanyEmail}
|
||||
onChange={(e) => setNewCompanyEmail(e.target.value)}
|
||||
placeholder="contact@company.com"
|
||||
type="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Website *</label>
|
||||
<Input
|
||||
value={newCompanyLink}
|
||||
onChange={(e) => setNewCompanyLink(e.target.value)}
|
||||
placeholder="https://company.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Company Logo URL</label>
|
||||
<Input
|
||||
value={newCompanyImageURL}
|
||||
onChange={(e) => setNewCompanyImageURL(e.target.value)}
|
||||
placeholder="https://example.com/logo.png"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Description *</label>
|
||||
<Textarea
|
||||
value={newCompanyDescription}
|
||||
onChange={(e) => setNewCompanyDescription(e.target.value)}
|
||||
placeholder="Brief description of the company..."
|
||||
className="min-h-[80px] resize-none"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{companyError && (
|
||||
<Alert className="border-red-200 bg-red-50">
|
||||
<AlertCircle className="h-4 w-4 text-red-600" />
|
||||
<AlertDescription className="text-red-800">{companyError}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<Button type="submit" disabled={addingCompany} className="w-full">
|
||||
{addingCompany ? "Adding Company..." : "Add Company"}
|
||||
</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Job Details Section */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-2 pb-2 border-b border-gray-200">
|
||||
<Briefcase className="w-5 h-5 text-blue-600" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">Job Details</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Title *</FormLabel>
|
||||
<FormLabel className="text-sm font-medium text-gray-700">Job 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} />
|
||||
<Input placeholder="e.g. Software Engineer" {...field} className="h-11" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="location"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Location *</FormLabel>
|
||||
<FormLabel className="text-sm font-medium text-gray-700 flex items-center gap-1">
|
||||
<MapPin className="w-4 h-4" />
|
||||
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} />
|
||||
<Input placeholder="e.g. Mumbai, India" {...field} className="h-11" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="salary"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Salary *</FormLabel>
|
||||
<FormLabel className="text-sm font-medium text-gray-700 flex items-center gap-1">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
Salary *
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Salary" {...field} />
|
||||
<Input placeholder="e.g. ₹5-8 LPA" {...field} className="h-11" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="applicationDeadline"
|
||||
render={({ field }) => {
|
||||
const getDisplayDate = (value: string) => {
|
||||
if (!value) return '';
|
||||
if (!value) return ""
|
||||
try {
|
||||
return format(new Date(value), 'PPP');
|
||||
return format(new Date(value), "PPP")
|
||||
} catch {
|
||||
return value;
|
||||
return value
|
||||
}
|
||||
};
|
||||
const selectedDate = field.value ? new Date(field.value) : undefined;
|
||||
// Use a local handler to ensure immediate update
|
||||
}
|
||||
|
||||
const selectedDate = field.value ? new Date(field.value) : undefined
|
||||
|
||||
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));
|
||||
field.onChange(date.toISOString().slice(0, 10))
|
||||
} else {
|
||||
field.onChange('');
|
||||
field.onChange("")
|
||||
}
|
||||
}, 0);
|
||||
};
|
||||
}, 0)
|
||||
}
|
||||
|
||||
return (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Application Deadline *</FormLabel>
|
||||
<FormLabel className="text-sm font-medium text-gray-700">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"
|
||||
"h-11 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>}
|
||||
{getDisplayDate(typeof field.value === "string" ? field.value : "") || (
|
||||
<span>Pick a date</span>
|
||||
)}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
@@ -263,104 +367,181 @@ function NewJobForm({ companies }: { companies: { id: number; name: string }[] }
|
||||
selected={selectedDate}
|
||||
onSelect={handleSelect}
|
||||
captionLayout="dropdown"
|
||||
key={typeof field.value === 'string' ? field.value : 'empty'}
|
||||
key={typeof field.value === "string" ? field.value : "empty"}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="link"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-sm font-medium text-gray-700 flex items-center gap-1">
|
||||
<LinkIcon className="w-4 h-4" />
|
||||
Job Application Link *
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="https://company.com/careers/job-id" {...field} className="h-11" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="imageURL"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-sm font-medium text-gray-700">Job Image URL</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="https://example.com/job-image.png" {...field} className="h-11" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="text-sm font-medium text-gray-700">Job Description *</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Describe the role, responsibilities, and requirements..."
|
||||
{...field}
|
||||
className="min-h-[120px] resize-none"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Academic Requirements Section */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-2 pb-2 border-b border-gray-200">
|
||||
<GraduationCap className="w-5 h-5 text-blue-600" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">Academic Requirements</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="minCGPA"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Min CGPA</FormLabel>
|
||||
<FormLabel className="text-sm font-medium text-gray-700">Minimum CGPA</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" step="0.01" placeholder="0" {...field} />
|
||||
<Input type="number" step="0.01" placeholder="0.00" {...field} className="h-11" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="minSSC"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Min SSC %</FormLabel>
|
||||
<FormLabel className="text-sm font-medium text-gray-700">Minimum SSC %</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" step="0.01" placeholder="0" {...field} />
|
||||
<Input type="number" step="0.01" placeholder="0.00" {...field} className="h-11" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="minHSC"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Min HSC %</FormLabel>
|
||||
<FormLabel className="text-sm font-medium text-gray-700">Minimum HSC %</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="number" step="0.01" placeholder="0" {...field} />
|
||||
<Input type="number" step="0.01" placeholder="0.00" {...field} className="h-11" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-6">
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="allowDeadKT"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Allow Dead KT</FormLabel>
|
||||
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-gray-50">
|
||||
<FormControl>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.value}
|
||||
onChange={(e) => field.onChange(e.target.checked)}
|
||||
/>
|
||||
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<div className="space-y-1 leading-none">
|
||||
<FormLabel className="text-sm font-medium">Allow Dead KT</FormLabel>
|
||||
<p className="text-xs text-gray-600">Students with cleared backlogs can apply</p>
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="allowLiveKT"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Allow Live KT</FormLabel>
|
||||
<FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-gray-50">
|
||||
<FormControl>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={field.value}
|
||||
onChange={(e) => field.onChange(e.target.checked)}
|
||||
/>
|
||||
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
<div className="space-y-1 leading-none">
|
||||
<FormLabel className="text-sm font-medium">Allow Live KT</FormLabel>
|
||||
<p className="text-xs text-gray-600">Students with pending backlogs can apply</p>
|
||||
</div>
|
||||
</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'}
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div className="flex justify-center pt-6">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
||||
Creating Job...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Briefcase className="w-4 h-4 mr-2" />
|
||||
Create Job Listing
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default NewJobForm;
|
||||
export default NewJobForm
|
||||
|
||||
@@ -1,84 +1,40 @@
|
||||
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 { 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';
|
||||
import { Separator } from '@workspace/ui/components/separator';
|
||||
import Link from 'next/link';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { db, companies, jobs } from '@workspace/db';
|
||||
import { Plus, Building2, Briefcase, MapPin, DollarSign, Calendar, ExternalLink } from 'lucide-react';
|
||||
|
||||
async function createCompany(formData: FormData) {
|
||||
'use server';
|
||||
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() || 'N/A';
|
||||
const imageURL =
|
||||
String(formData.get('imageURL') ?? '').trim() ||
|
||||
'https://via.placeholder.com/200x200?text=Company';
|
||||
|
||||
if (!name) return;
|
||||
|
||||
await db.insert(companies).values({ name, email, link, description, imageURL });
|
||||
revalidatePath('/');
|
||||
}
|
||||
|
||||
async function createJob(formData: FormData) {
|
||||
'use server';
|
||||
const companyId = Number(formData.get('companyId'));
|
||||
const title = String(formData.get('title') ?? '').trim();
|
||||
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 salary = String(formData.get('salary') ?? '').trim() || 'N/A';
|
||||
const deadlineRaw = formData.get('deadline');
|
||||
const applicationDeadline = deadlineRaw ? new Date(String(deadlineRaw)) : new Date();
|
||||
|
||||
if (!companyId || !title) return;
|
||||
|
||||
await db.insert(jobs).values({
|
||||
companyId,
|
||||
title,
|
||||
link,
|
||||
description,
|
||||
location,
|
||||
imageURL,
|
||||
salary,
|
||||
applicationDeadline,
|
||||
active: true,
|
||||
});
|
||||
revalidatePath('/');
|
||||
}
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@workspace/ui/components/card"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import { Badge } from "@workspace/ui/components/badge"
|
||||
import { Separator } from "@workspace/ui/components/separator"
|
||||
import Link from "next/link"
|
||||
import { db, companies } from "@workspace/db"
|
||||
import { Plus, Building2, Briefcase, MapPin, DollarSign, Calendar, ExternalLink } from "lucide-react"
|
||||
|
||||
async function getDashboardData() {
|
||||
try {
|
||||
// First, let's test a simple query without relations
|
||||
const companiesOnly = await db.select().from(companies);
|
||||
console.log('Companies query successful:', companiesOnly.length);
|
||||
// Get companies with their jobs
|
||||
const result = await db.query.companies.findMany({
|
||||
with: {
|
||||
jobs: {
|
||||
where: (job, {eq}) => eq(job.active, true), // Only include active jobs
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Now try the relation query
|
||||
const result = await db.query.companies.findMany({ with: { jobs: true } });
|
||||
console.log('Full query successful:', result.length);
|
||||
return result;
|
||||
// Filter to only include companies that have active jobs
|
||||
const companiesWithActiveJobs = result.filter((company) => company.jobs.length > 0)
|
||||
|
||||
console.log("Companies with active jobs:", companiesWithActiveJobs.length)
|
||||
return companiesWithActiveJobs
|
||||
} catch (error) {
|
||||
console.error('Database query error:', error);
|
||||
console.error("Database query error:", error)
|
||||
// Fallback to companies only if the relation query fails
|
||||
const companiesOnly = await db.select().from(companies);
|
||||
return companiesOnly.map(company => ({ ...company, jobs: [] }));
|
||||
const companiesOnly = await db.select().from(companies)
|
||||
return companiesOnly.map((company) => ({ ...company, jobs: [] }))
|
||||
}
|
||||
}
|
||||
|
||||
export default async function DashboardPage() {
|
||||
const data = await getDashboardData();
|
||||
const data = await getDashboardData()
|
||||
|
||||
// Calculate stats for companies with active jobs only
|
||||
const totalActiveJobs = data.reduce((acc, company) => acc + company.jobs.filter((job) => job.active).length, 0)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br">
|
||||
@@ -88,49 +44,14 @@ export default async function DashboardPage() {
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold text-gray-800 mb-2">Companies Dashboard</h1>
|
||||
<p className="text-gray-600 text-lg">Manage companies and their job listings</p>
|
||||
<p className="text-gray-600 text-lg">Companies with active job listings</p>
|
||||
</div>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Link href="/jobs/new">
|
||||
<Button className="flex items-center gap-2 px-6 py-3 text-base font-medium shadow-lg hover:shadow-xl transition-all duration-200">
|
||||
<Plus className="w-5 h-5" />
|
||||
Add New Company
|
||||
Add New Job
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl font-semibold">Add a new company</DialogTitle>
|
||||
<DialogDescription className="text-gray-600">
|
||||
Fill in the details below to add a new company to your dashboard.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form action={createCompany} className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Company Name *</label>
|
||||
<Input name="name" placeholder="Enter company name" required className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Contact Email *</label>
|
||||
<Input name="email" placeholder="contact@company.com" type="email" required className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Website</label>
|
||||
<Input name="link" placeholder="https://company.com" className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Company Logo URL</label>
|
||||
<Input name="imageURL" placeholder="https://example.com/logo.png" className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Description</label>
|
||||
<Textarea name="description" placeholder="Brief description of the company..." className="min-h-[80px] resize-none" />
|
||||
</div>
|
||||
<Button type="submit" className="w-full h-11 text-base font-medium">
|
||||
Add Company
|
||||
</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
@@ -139,30 +60,34 @@ export default async function DashboardPage() {
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Total Companies</p>
|
||||
<p className="text-sm font-medium text-gray-600">Companies with Active Jobs</p>
|
||||
<p className="text-3xl font-bold text-gray-800">{data.length}</p>
|
||||
</div>
|
||||
<Building2 className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Total Jobs</p>
|
||||
<p className="text-3xl font-bold text-gray-800">{data.reduce((acc, company) => acc + company.jobs.length, 0)}</p>
|
||||
<p className="text-sm font-medium text-gray-600">Total Active Jobs</p>
|
||||
<p className="text-3xl font-bold text-gray-800">{totalActiveJobs}</p>
|
||||
</div>
|
||||
<Briefcase className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white shadow-sm hover:shadow-md transition-shadow duration-200">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Active Jobs</p>
|
||||
<p className="text-3xl font-bold text-gray-800">{data.reduce((acc, company) => acc + company.jobs.filter(job => job.active).length, 0)}</p>
|
||||
<p className="text-sm font-medium text-gray-600">Avg Jobs per Company</p>
|
||||
<p className="text-3xl font-bold text-gray-800">
|
||||
{data.length > 0 ? Math.round((totalActiveJobs / data.length) * 10) / 10 : 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<div className="w-3 h-3 bg-blue-500 rounded-full"></div>
|
||||
@@ -179,54 +104,22 @@ export default async function DashboardPage() {
|
||||
<Card className="bg-white shadow-sm">
|
||||
<CardContent className="p-12 text-center">
|
||||
<Building2 className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-2">No companies yet</h3>
|
||||
<p className="text-gray-500 mb-6">Get started by adding your first company</p>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-2">No companies with active jobs</h3>
|
||||
<p className="text-gray-500 mb-6">Get started by adding your first job listing</p>
|
||||
<Link href="/jobs/new">
|
||||
<Button className="flex items-center gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
Add Company
|
||||
Add Job
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-2xl font-semibold">Add a new company</DialogTitle>
|
||||
<DialogDescription className="text-gray-600">
|
||||
Fill in the details below to add a new company to your dashboard.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form action={createCompany} className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Company Name *</label>
|
||||
<Input name="name" placeholder="Enter company name" required className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Contact Email *</label>
|
||||
<Input name="email" placeholder="contact@company.com" type="email" required className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Website</label>
|
||||
<Input name="link" placeholder="https://company.com" className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Company Logo URL</label>
|
||||
<Input name="imageURL" placeholder="https://example.com/logo.png" className="h-11" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-gray-700">Description</label>
|
||||
<Textarea name="description" placeholder="Brief description of the company..." className="min-h-[80px] resize-none" />
|
||||
</div>
|
||||
<Button type="submit" className="w-full h-11 text-base font-medium">
|
||||
Add Company
|
||||
</Button>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
data.map((company) => (
|
||||
<Card key={company.id} className="bg-white shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden">
|
||||
<Card
|
||||
key={company.id}
|
||||
className="bg-white shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden"
|
||||
>
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
@@ -240,11 +133,12 @@ export default async function DashboardPage() {
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{company.jobs.length} job{company.jobs.length !== 1 ? 's' : ''}
|
||||
{company.jobs.filter((job) => job.active).length} active job
|
||||
{company.jobs.filter((job) => job.active).length !== 1 ? "s" : ""}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
{company.description && company.description !== 'N/A' && (
|
||||
{company.description && company.description !== "N/A" && (
|
||||
<p className="text-sm text-gray-600 mt-3">{company.description}</p>
|
||||
)}
|
||||
</CardHeader>
|
||||
@@ -253,43 +147,44 @@ export default async function DashboardPage() {
|
||||
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-medium text-gray-700">Job Listings</h3>
|
||||
<Link href={`/jobs/new?companyId=${company.id}`} className="text-sm text-blue-600 hover:text-blue-700 font-medium">
|
||||
Add Job
|
||||
</Link>
|
||||
<h3 className="text-lg font-medium text-gray-700">Active Job Listings</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{company.jobs.length > 0 ? (
|
||||
company.jobs.map((job) => (
|
||||
<Card key={job.id} className="group hover:shadow-lg transition-all duration-200 border border-gray-200 bg-gray-50 hover:bg-white">
|
||||
{company.jobs
|
||||
.filter((job) => job.active)
|
||||
.map((job) => (
|
||||
<Card
|
||||
key={job.id}
|
||||
className="group hover:shadow-lg transition-all duration-200 border border-gray-200 bg-gray-50 hover:bg-white"
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<h4 className="font-medium text-gray-800 text-sm leading-tight line-clamp-2">{job.title}</h4>
|
||||
<h4 className="font-medium text-gray-800 text-sm leading-tight line-clamp-2">
|
||||
{job.title}
|
||||
</h4>
|
||||
<Badge
|
||||
variant={job.active ? "default" : "secondary"}
|
||||
className={`text-xs ${job.active ? 'bg-blue-100 text-blue-700 hover:bg-blue-200' : 'bg-gray-100 text-gray-500'}`}
|
||||
variant="default"
|
||||
className="text-xs bg-blue-100 text-blue-700 hover:bg-blue-200"
|
||||
>
|
||||
{job.active ? 'Active' : 'Inactive'}
|
||||
Active
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{job.location && job.location !== 'N/A' && (
|
||||
{job.location && job.location !== "N/A" && (
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<MapPin className="w-3 h-3" />
|
||||
<span className="truncate">{job.location}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{job.salary && job.salary !== 'N/A' && (
|
||||
{job.salary && job.salary !== "N/A" && (
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<DollarSign className="w-3 h-3" />
|
||||
<span className="truncate">{job.salary}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-1 text-xs text-gray-500">
|
||||
<Calendar className="w-3 h-3" />
|
||||
<span>Deadline: {job.applicationDeadline.toLocaleDateString()}</span>
|
||||
@@ -312,22 +207,7 @@ export default async function DashboardPage() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<div className="col-span-full">
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Briefcase className="w-12 h-12 text-gray-300 mb-4" />
|
||||
<h4 className="text-lg font-medium text-gray-700 mb-2">No jobs yet</h4>
|
||||
<p className="text-gray-500 mb-4">This company doesn't have any job listings</p>
|
||||
<Link href={`/jobs/new?companyId=${company.id}`}>
|
||||
<Button variant="outline" size="sm" className="flex items-center gap-2">
|
||||
<Plus className="w-4 h-4" />
|
||||
Add First Job
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -336,7 +216,7 @@ export default async function DashboardPage() {
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export const dynamic = 'force-dynamic';
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^5.1.1",
|
||||
"@radix-ui/react-accordion": "^1.2.0",
|
||||
"@radix-ui/react-checkbox": "^1.3.2",
|
||||
"@radix-ui/react-dialog": "^1.1.1",
|
||||
"@radix-ui/react-label": "^2.1.0",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.0",
|
||||
|
||||
66
packages/ui/src/components/alert.tsx
Normal file
66
packages/ui/src/components/alert.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@workspace/ui/lib/utils"
|
||||
|
||||
const alertVariants = cva(
|
||||
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-card text-card-foreground",
|
||||
destructive:
|
||||
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Alert({
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert"
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-title"
|
||||
className={cn(
|
||||
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-description"
|
||||
className={cn(
|
||||
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription }
|
||||
32
packages/ui/src/components/checkbox.tsx
Normal file
32
packages/ui/src/components/checkbox.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@workspace/ui/lib/utils"
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="flex items-center justify-center text-current transition-none"
|
||||
>
|
||||
<CheckIcon className="size-3.5" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
32
pnpm-lock.yaml
generated
32
pnpm-lock.yaml
generated
@@ -247,6 +247,9 @@ importers:
|
||||
'@radix-ui/react-accordion':
|
||||
specifier: ^1.2.0
|
||||
version: 1.2.11(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-checkbox':
|
||||
specifier: ^1.3.2
|
||||
version: 1.3.2(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-dialog':
|
||||
specifier: ^1.1.1
|
||||
version: 1.1.14(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
@@ -1008,6 +1011,19 @@ packages:
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-checkbox@1.3.2':
|
||||
resolution: {integrity: sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==}
|
||||
peerDependencies:
|
||||
'@types/react': '*'
|
||||
'@types/react-dom': '*'
|
||||
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
|
||||
peerDependenciesMeta:
|
||||
'@types/react':
|
||||
optional: true
|
||||
'@types/react-dom':
|
||||
optional: true
|
||||
|
||||
'@radix-ui/react-collapsible@1.1.11':
|
||||
resolution: {integrity: sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==}
|
||||
peerDependencies:
|
||||
@@ -4134,6 +4150,22 @@ snapshots:
|
||||
'@types/react': 19.1.8
|
||||
'@types/react-dom': 19.1.6(@types/react@19.1.8)
|
||||
|
||||
'@radix-ui/react-checkbox@1.3.2(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.2
|
||||
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)
|
||||
'@radix-ui/react-context': 1.1.2(@types/react@19.1.8)(react@19.1.0)
|
||||
'@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
'@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.8)(react@19.1.0)
|
||||
'@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.8)(react@19.1.0)
|
||||
'@radix-ui/react-use-size': 1.1.1(@types/react@19.1.8)(react@19.1.0)
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
optionalDependencies:
|
||||
'@types/react': 19.1.8
|
||||
'@types/react-dom': 19.1.6(@types/react@19.1.8)
|
||||
|
||||
'@radix-ui/react-collapsible@1.1.11(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
|
||||
dependencies:
|
||||
'@radix-ui/primitive': 1.1.2
|
||||
|
||||
Reference in New Issue
Block a user