371 lines
11 KiB
TypeScript
371 lines
11 KiB
TypeScript
"use client";
|
||
import React, { useState } from "react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Input } from "@/components/ui/input";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import { User, Building, Save, Filter, Search, Link } from "lucide-react";
|
||
import {
|
||
PageProps,
|
||
LanguageTranslation,
|
||
} from "@/components/validations/translations/translation";
|
||
|
||
interface ApplicationData {
|
||
name: string;
|
||
application_code: string;
|
||
site_url: string;
|
||
application_type: string;
|
||
description: string;
|
||
}
|
||
|
||
const translations: Record<string, LanguageTranslation> = {
|
||
typeSelection: {
|
||
en: "Type Selection",
|
||
tr: "Tür Seçimi",
|
||
},
|
||
filterSelection: {
|
||
en: "Filter Selection",
|
||
tr: "Filtre Seçimi",
|
||
},
|
||
employee: {
|
||
en: "Employee",
|
||
tr: "Çalışan",
|
||
},
|
||
occupant: {
|
||
en: "Occupant",
|
||
tr: "Sakin",
|
||
},
|
||
search: {
|
||
en: "Search",
|
||
tr: "Ara",
|
||
},
|
||
siteUrl: {
|
||
en: "Site URL",
|
||
tr: "Site URL",
|
||
},
|
||
applicationType: {
|
||
en: "Application Type",
|
||
tr: "Uygulama Türü",
|
||
},
|
||
availableApplications: {
|
||
en: "Available Applications",
|
||
tr: "Mevcut Uygulamalar",
|
||
},
|
||
code: {
|
||
en: "Code",
|
||
tr: "Kod",
|
||
},
|
||
url: {
|
||
en: "URL",
|
||
tr: "URL",
|
||
},
|
||
type: {
|
||
en: "Type",
|
||
tr: "Tür",
|
||
},
|
||
};
|
||
|
||
const ApplicationPage: React.FC<PageProps> = ({ lang = "en" }) => {
|
||
const [selectedType, setSelectedType] = useState<"employee" | "occupant">(
|
||
"employee"
|
||
);
|
||
const [selectedUrl, setSelectedUrl] = useState<string>("");
|
||
const [selectedAppType, setSelectedAppType] = useState<string>("");
|
||
const [searchQuery, setSearchQuery] = useState<string>("");
|
||
const [applicationData, setApplicationData] = useState<ApplicationData>({
|
||
name: "",
|
||
application_code: "",
|
||
site_url: "",
|
||
application_type: "",
|
||
description: "",
|
||
});
|
||
|
||
// Available options for dropdowns
|
||
const urlOptions = [
|
||
"/dashboard",
|
||
"/individual",
|
||
"/user",
|
||
"/settings",
|
||
"/reports",
|
||
];
|
||
const typeOptions = ["info", "Dash", "Admin"];
|
||
|
||
// Handle selection button click
|
||
const handleTypeSelect = (type: "employee" | "occupant") => {
|
||
setSelectedType(type);
|
||
};
|
||
|
||
// Handle application data input changes
|
||
const handleInputChange = (name: string, value: string) => {
|
||
setApplicationData({
|
||
...applicationData,
|
||
[name]: value,
|
||
});
|
||
};
|
||
|
||
// Sample application data for the grid
|
||
const sampleApplications = [
|
||
{
|
||
name: "Dashboard",
|
||
application_code: "app000001",
|
||
site_url: "/dashboard",
|
||
application_type: "info",
|
||
description: "Dashboard Page",
|
||
},
|
||
{
|
||
name: "Individual",
|
||
application_code: "app000003",
|
||
site_url: "/individual",
|
||
application_type: "Dash",
|
||
description: "Individual Page for people",
|
||
},
|
||
{
|
||
name: "User",
|
||
application_code: "app000004",
|
||
site_url: "/user",
|
||
application_type: "Dash",
|
||
description: "Individual Page for user",
|
||
},
|
||
{
|
||
name: "Settings",
|
||
application_code: "app000005",
|
||
site_url: "/settings",
|
||
application_type: "Admin",
|
||
description: "Settings Page",
|
||
},
|
||
{
|
||
name: "Reports",
|
||
application_code: "app000006",
|
||
site_url: "/reports",
|
||
application_type: "info",
|
||
description: "Reports Page",
|
||
},
|
||
];
|
||
|
||
// Generate grid of application cards
|
||
const renderApplicationGrid = () => {
|
||
return sampleApplications.map((app, index) => (
|
||
<div key={index} className="w-full sm:w-1/5 p-1">
|
||
<Card className="h-full hover:bg-accent/50 cursor-pointer transition-colors">
|
||
<CardContent className="p-3">
|
||
<div className="font-medium text-sm mb-1">{app.name}</div>
|
||
<div className="space-y-0.5 text-xs">
|
||
<div className="flex">
|
||
<span className="text-muted-foreground w-10">
|
||
{translations.code[lang]}:
|
||
</span>
|
||
<span className="truncate">{app.application_code}</span>
|
||
</div>
|
||
<div className="flex">
|
||
<span className="text-muted-foreground w-10">
|
||
{translations.url[lang]}:
|
||
</span>
|
||
<span className="truncate">{app.site_url}</span>
|
||
</div>
|
||
<div className="flex">
|
||
<span className="text-muted-foreground w-10">
|
||
{translations.type[lang]}:
|
||
</span>
|
||
<span className="truncate">{app.application_type}</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
));
|
||
};
|
||
|
||
return (
|
||
<div className="container mx-auto p-4 space-y-6">
|
||
{/* Selection Buttons */}
|
||
<Card>
|
||
<CardContent className="pt-6">
|
||
<div className="flex flex-row">
|
||
{/* User type selection - vertical on the left (w-1/2) */}
|
||
<div className="w-1/2 flex flex-col space-y-4 pr-4">
|
||
<div className="font-medium text-sm mb-2 flex items-center">
|
||
<User className="mr-2 h-4 w-4" />
|
||
{translations.typeSelection[lang]}
|
||
</div>
|
||
<Button
|
||
variant={selectedType === "employee" ? "default" : "outline"}
|
||
size="lg"
|
||
onClick={() => handleTypeSelect("employee")}
|
||
className="w-full h-14 mb-2"
|
||
>
|
||
<User className="mr-2 h-4 w-4" />
|
||
{translations.employee[lang]}
|
||
</Button>
|
||
<Button
|
||
variant={selectedType === "occupant" ? "default" : "outline"}
|
||
size="lg"
|
||
onClick={() => handleTypeSelect("occupant")}
|
||
className="w-full h-14"
|
||
>
|
||
<Building className="mr-2 h-4 w-4" />
|
||
{translations.occupant[lang]}
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Filters on the right (w-1/2) */}
|
||
<div className="w-1/2 flex flex-col space-y-4 pl-4">
|
||
<div className="font-medium text-sm mb-2 flex items-center">
|
||
<Filter className="mr-2 h-4 w-4" />
|
||
{translations.filterSelection[lang]}
|
||
</div>
|
||
|
||
{/* Search input */}
|
||
<div className="w-full">
|
||
<label className="block text-xs font-medium mb-1">
|
||
{translations.search[lang]}
|
||
</label>
|
||
<div className="relative w-full">
|
||
<Input
|
||
placeholder={`${translations.search[lang]}...`}
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
className="pl-8 w-full h-10"
|
||
/>
|
||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Site URL dropdown */}
|
||
<div className="w-full">
|
||
<label className="block text-xs font-medium mb-1">
|
||
{translations.siteUrl[lang]}
|
||
</label>
|
||
<div className="w-full">
|
||
<Select value={selectedUrl} onValueChange={setSelectedUrl}>
|
||
<SelectTrigger className="w-full h-10">
|
||
<SelectValue
|
||
placeholder={`${translations.siteUrl[lang]}...`}
|
||
/>
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{urlOptions.map((url) => (
|
||
<SelectItem key={url} value={url}>
|
||
<div className="flex items-center">
|
||
<Link className="mr-2 h-3 w-3" />
|
||
{url}
|
||
</div>
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Grid of Application Cards */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>{translations.availableApplications[lang]}</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex flex-wrap -mx-2">{renderApplicationGrid()}</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Application Data Form */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Application Details</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||
<div>
|
||
<label className="block text-sm font-medium mb-1">Name</label>
|
||
<Input
|
||
name="name"
|
||
value={applicationData.name}
|
||
onChange={(e) => handleInputChange("name", e.target.value)}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium mb-1">
|
||
Application Code
|
||
</label>
|
||
<Input
|
||
name="application_code"
|
||
value={applicationData.application_code}
|
||
onChange={(e) =>
|
||
handleInputChange("application_code", e.target.value)
|
||
}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium mb-1">Site URL</label>
|
||
<Input
|
||
name="site_url"
|
||
value={applicationData.site_url}
|
||
onChange={(e) => handleInputChange("site_url", e.target.value)}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium mb-1">
|
||
Application Type
|
||
</label>
|
||
<Select
|
||
value={applicationData.application_type}
|
||
onValueChange={(value) =>
|
||
handleInputChange("application_type", value)
|
||
}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="Select application type" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="info">Info</SelectItem>
|
||
<SelectItem value="Dash">Dash</SelectItem>
|
||
<SelectItem value="Admin">Admin</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
<div className="mb-4">
|
||
<label className="block text-sm font-medium mb-1">
|
||
Description
|
||
</label>
|
||
<textarea
|
||
name="description"
|
||
className="w-full min-h-[100px] rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm"
|
||
value={applicationData.description}
|
||
onChange={(e) => handleInputChange("description", e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="flex justify-end">
|
||
<Button>
|
||
<Save className="mr-2 h-4 w-4" />
|
||
Save Application
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Display current application data */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Current Application Data</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<pre className="bg-muted p-4 rounded-md overflow-auto">
|
||
{JSON.stringify(applicationData, null, 2)}
|
||
</pre>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ApplicationPage;
|