Changes in UI
This commit is contained in:
sumona-banerjeee
@@ -131,13 +131,28 @@ export default function CreatePackagePage() {
|
||||
render: (pkg: PackageType) => getProjectName(pkg.project_id)
|
||||
},
|
||||
{
|
||||
key: "region",
|
||||
header: "Region",
|
||||
key: "project_state",
|
||||
header: "Project State",
|
||||
render: (pkg: PackageType) => {
|
||||
const project = projects.find(p => p.id === pkg.project_id)
|
||||
if (!project?.state) return <span className="text-gray-400">—</span>
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{project.state.split(',').map((item, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 py-0.5 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-[10px] font-semibold border border-blue-100 dark:border-blue-800 shadow-sm"
|
||||
>
|
||||
{item.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: "created_at",
|
||||
header: "Created",
|
||||
render: (pkg: PackageType) => new Date(pkg.created_at).toLocaleDateString()
|
||||
key: "region",
|
||||
header: "Region",
|
||||
},
|
||||
]
|
||||
|
||||
@@ -145,16 +160,16 @@ export default function CreatePackagePage() {
|
||||
<div className="min-h-screen bg-mesh-gradient text-gray-900 dark:text-gray-100">
|
||||
<SidebarNavigation />
|
||||
<main className="ml-16 min-h-screen relative overflow-hidden">
|
||||
<div className="mx-auto px-4 py-8 max-w-6xl relative z-10">
|
||||
{/* Header */}
|
||||
<div className="mx-auto px-6 py-8 max-w-7xl relative z-10">
|
||||
{/* Refined Header */}
|
||||
<div className="mb-8 animate-in fade-in slide-in-from-left duration-700">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex-shrink-0 w-16 h-16 rounded-2xl bg-white shadow-xl border-2 border-[#1e40af] transition-transform duration-300 hover:scale-110 flex items-center justify-center">
|
||||
<Package className="h-8 w-8 text-[#2563eb]" />
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="p-3 rounded-2xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center">
|
||||
<Package className="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<h1 className="text-3xl md:text-4xl font-extrabold text-[#2563eb] tracking-tight">
|
||||
Packages
|
||||
<h1 className="text-3xl md:text-4xl font-bold bg-gradient-to-r from-gray-900 via-indigo-800 to-indigo-600 dark:from-white dark:via-indigo-200 dark:to-indigo-400 bg-clip-text text-transparent">
|
||||
Package Management
|
||||
</h1>
|
||||
<p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium italic">
|
||||
Manage project packages
|
||||
@@ -199,7 +214,7 @@ export default function CreatePackagePage() {
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Package className="h-5 w-5 text-violet-500" />
|
||||
<Package className="h-5 w-5 text-blue-500" />
|
||||
Create New Package
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
@@ -209,9 +224,9 @@ export default function CreatePackagePage() {
|
||||
|
||||
{/* Success Message in Modal */}
|
||||
{success && (
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-gradient-to-r from-violet-50 to-purple-50 dark:from-violet-950/30 dark:to-purple-950/30 border border-violet-200 dark:border-violet-800 animate-in fade-in slide-in-from-top duration-300">
|
||||
<CheckCircle2 className="h-5 w-5 text-violet-500 flex-shrink-0" />
|
||||
<p className="text-sm font-medium text-violet-700 dark:text-violet-400">Package created successfully!</p>
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border border-blue-200 dark:border-blue-800 animate-in fade-in slide-in-from-top duration-300">
|
||||
<CheckCircle2 className="h-5 w-5 text-blue-500 flex-shrink-0" />
|
||||
<p className="text-sm font-medium text-blue-700 dark:text-blue-400">Package created successfully!</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -227,18 +242,18 @@ export default function CreatePackagePage() {
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Step 1: Select Project */}
|
||||
<div className="p-4 rounded-xl bg-gradient-to-r from-violet-50/50 to-purple-50/50 dark:from-violet-950/20 dark:to-purple-950/20 border border-violet-100 dark:border-violet-900/50">
|
||||
<div className="p-4 rounded-xl bg-gradient-to-r from-blue-50/50 to-indigo-50/40 dark:from-blue-950/20 dark:to-indigo-950/20 border border-blue-100 dark:border-blue-900/50">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
|
||||
<span className="text-white text-xs font-bold">1</span>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-violet-700 dark:text-violet-400">Select Project</p>
|
||||
<p className="text-sm font-bold text-blue-700 dark:text-blue-400">Select Project</p>
|
||||
</div>
|
||||
<Select value={selectedProjectId} onValueChange={setSelectedProjectId}>
|
||||
<SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-violet-200 dark:border-violet-800 focus:border-violet-400">
|
||||
<SelectTrigger className="h-11 bg-white dark:bg-gray-800 border-blue-200 dark:border-blue-800 focus:border-blue-400">
|
||||
{loadingProjects ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2 className="h-4 w-4 animate-spin text-violet-500" />
|
||||
<Loader2 className="h-4 w-4 animate-spin text-blue-500" />
|
||||
<span className="text-gray-400">Loading projects...</span>
|
||||
</div>
|
||||
) : (
|
||||
@@ -255,7 +270,7 @@ export default function CreatePackagePage() {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{selectedProject && (
|
||||
<div className="mt-2 px-3 py-1.5 rounded-lg bg-violet-100/50 dark:bg-violet-900/20 text-xs text-violet-600 dark:text-violet-400">
|
||||
<div className="mt-2 px-3 py-1.5 rounded-lg bg-blue-100/50 dark:bg-blue-900/20 text-xs text-blue-600 dark:text-blue-400">
|
||||
Selected: <span className="font-semibold">{selectedProject.name}</span>
|
||||
{selectedProject.corridor_name && ` • ${selectedProject.corridor_name}`}
|
||||
</div>
|
||||
@@ -265,7 +280,7 @@ export default function CreatePackagePage() {
|
||||
{/* Step 2: Package Info */}
|
||||
<div className={`space-y-4 transition-opacity duration-300 ${selectedProjectId ? 'opacity-100' : 'opacity-40 pointer-events-none'}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-gradient-to-br from-violet-500 to-purple-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
|
||||
<div className={`w-6 h-6 rounded-full flex items-center justify-center ${selectedProjectId ? 'bg-gradient-to-br from-blue-500 to-indigo-600' : 'bg-gray-300 dark:bg-gray-600'}`}>
|
||||
<span className="text-white text-xs font-bold">2</span>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-gray-700 dark:text-gray-300">Package Information</p>
|
||||
@@ -317,7 +332,7 @@ export default function CreatePackagePage() {
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !name.trim() || !selectedProjectId}
|
||||
className="flex-1 bg-gradient-to-r from-violet-500 via-purple-500 to-fuchsia-600 hover:from-violet-600 hover:via-purple-600 hover:to-fuchsia-700 text-white"
|
||||
className="flex-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-blue-600 hover:from-blue-600 hover:via-indigo-600 hover:to-blue-700 text-white"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<span className="flex items-center gap-2">
|
||||
|
||||
Reference in New Issue
Block a user