New dashboard ui with sechma fix
This commit is contained in:
Anushlinux
7
.vscode/settings.json
vendored
7
.vscode/settings.json
vendored
@@ -1,5 +1,10 @@
|
|||||||
{
|
{
|
||||||
"tailwindCSS.experimental.configFile": "packages/ui/src/styles/globals.css",
|
"tailwindCSS.experimental.configFile": "packages/ui/src/styles/globals.css",
|
||||||
"editor.formatOnSave": true,
|
"editor.formatOnSave": true,
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||||
|
"workbench.colorCustomizations": {
|
||||||
|
"editorInfo.foreground": "#0080ff6a",
|
||||||
|
"minimap.background": "#00000000",
|
||||||
|
"scrollbar.shadow": "#00000000"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,9 +7,11 @@ import { Button } from '@workspace/ui/components/button';
|
|||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription } from '@workspace/ui/components/dialog';
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription } from '@workspace/ui/components/dialog';
|
||||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@workspace/ui/components/accordion';
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@workspace/ui/components/accordion';
|
||||||
import { Badge } from '@workspace/ui/components/badge';
|
import { Badge } from '@workspace/ui/components/badge';
|
||||||
|
import { Separator } from '@workspace/ui/components/separator';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { revalidatePath } from 'next/cache';
|
import { revalidatePath } from 'next/cache';
|
||||||
import { db, companies, jobs } from '@workspace/db';
|
import { db, companies, jobs } from '@workspace/db';
|
||||||
|
import { Plus, Building2, Briefcase, MapPin, DollarSign, Calendar, ExternalLink } from 'lucide-react';
|
||||||
|
|
||||||
async function createCompany(formData: FormData) {
|
async function createCompany(formData: FormData) {
|
||||||
'use server';
|
'use server';
|
||||||
@@ -58,62 +60,281 @@ async function createJob(formData: FormData) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function getDashboardData() {
|
async function getDashboardData() {
|
||||||
return await db.query.companies.findMany({ with: { jobs: true } });
|
try {
|
||||||
|
// First, let's test a simple query without relations
|
||||||
|
const companiesOnly = await db.select().from(companies);
|
||||||
|
console.log('Companies query successful:', companiesOnly.length);
|
||||||
|
|
||||||
|
// Now try the relation query
|
||||||
|
const result = await db.query.companies.findMany({ with: { jobs: true } });
|
||||||
|
console.log('Full query successful:', result.length);
|
||||||
|
return result;
|
||||||
|
} catch (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: [] }));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default async function DashboardPage() {
|
export default async function DashboardPage() {
|
||||||
const data = await getDashboardData();
|
const data = await getDashboardData();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-16 px-4 md:px-16 py-8 min-h-screen">
|
<div className="min-h-screen bg-gradient-to-br">
|
||||||
<section className="flex justify-between items-center">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
<h1 className="text-3xl font-bold text-gray-800">Companies Dashboard</h1>
|
{/* Header Section */}
|
||||||
<Dialog>
|
<section className="mb-12">
|
||||||
<DialogTrigger asChild>
|
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
|
||||||
<Button>Add New Company</Button>
|
<div>
|
||||||
</DialogTrigger>
|
<h1 className="text-4xl font-bold text-gray-800 mb-2">Companies Dashboard</h1>
|
||||||
<DialogContent>
|
<p className="text-gray-600 text-lg">Manage companies and their job listings</p>
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle>Add a new company</DialogTitle>
|
|
||||||
<DialogDescription>Fill in the details below to add a new company.</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
<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">Add Company</Button>
|
|
||||||
</form>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<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
|
||||||
|
</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>
|
||||||
</div>
|
</div>
|
||||||
))}
|
|
||||||
</section>
|
{/* Stats Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||||
|
<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 Companies</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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Companies Section */}
|
||||||
|
<section className="space-y-8">
|
||||||
|
{data.length === 0 ? (
|
||||||
|
<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>
|
||||||
|
<Button className="flex items-center gap-2">
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
Add Company
|
||||||
|
</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>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
data.map((company) => (
|
||||||
|
<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">
|
||||||
|
<div className="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center">
|
||||||
|
<Building2 className="w-6 h-6 text-gray-600" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-xl font-semibold text-gray-800">{company.name}</CardTitle>
|
||||||
|
<p className="text-sm text-gray-500 mt-1">{company.email}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge variant="secondary" className="text-xs">
|
||||||
|
{company.jobs.length} job{company.jobs.length !== 1 ? 's' : ''}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{company.description && company.description !== 'N/A' && (
|
||||||
|
<p className="text-sm text-gray-600 mt-3">{company.description}</p>
|
||||||
|
)}
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
<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'}`}
|
||||||
|
>
|
||||||
|
{job.active ? 'Active' : 'Inactive'}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
{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' && (
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{job.link && (
|
||||||
|
<div className="pt-2">
|
||||||
|
<a
|
||||||
|
href={job.link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-1 text-xs text-blue-600 hover:text-blue-700 font-medium group-hover:underline"
|
||||||
|
>
|
||||||
|
View Job
|
||||||
|
<ExternalLink className="w-3 h-3" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -238,7 +238,7 @@ export const applications = pgTable('applications', {
|
|||||||
.notNull(),
|
.notNull(),
|
||||||
});
|
});
|
||||||
|
|
||||||
export const comapnyRelations = relations(companies, ({ many }) => ({
|
export const companyRelations = relations(companies, ({ many }) => ({
|
||||||
jobs: many(jobs),
|
jobs: many(jobs),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
|||||||
47
packages/ui/src/components/avatar.tsx
Normal file
47
packages/ui/src/components/avatar.tsx
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
||||||
|
import { cn } from "@workspace/ui/lib/utils"
|
||||||
|
|
||||||
|
const Avatar = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AvatarPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AvatarPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border border-border bg-muted",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Avatar.displayName = "Avatar"
|
||||||
|
|
||||||
|
const AvatarImage = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AvatarPrimitive.Image>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AvatarPrimitive.Image
|
||||||
|
ref={ref}
|
||||||
|
className={cn("aspect-square h-full w-full", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
AvatarImage.displayName = "AvatarImage"
|
||||||
|
|
||||||
|
const AvatarFallback = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AvatarPrimitive.Fallback>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AvatarPrimitive.Fallback
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex h-full w-full items-center justify-center rounded-full bg-muted text-foreground",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
AvatarFallback.displayName = "AvatarFallback"
|
||||||
|
|
||||||
|
export { Avatar, AvatarImage, AvatarFallback }
|
||||||
Reference in New Issue
Block a user