From 478c353d031138982bb326266d35bee4db03c936 Mon Sep 17 00:00:00 2001 From: Magnus-SmariSma <20734986-Magnus-SmariSma@users.noreply.replit.com> Date: Thu, 20 Mar 2025 21:48:06 +0000 Subject: [PATCH] Add initial project files and basic UI components for CITES+ species search web application. Replit-Commit-Author: Agent Replit-Commit-Session-Id: e931b5ab-041b-42e7-baf1-50017869cef6 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/e19c6a51-7e4c-4bb8-a6a6-46dc00f0ec99/3a46e308-0211-4c54-a52b-c291792321ef.jpg --- .gitignore | 6 + .replit | 42 + client/index.html | 11 + client/src/App.tsx | 26 + .../src/components/authentication-panel.tsx | 119 + client/src/components/recent-searches.tsx | 63 + client/src/components/results-container.tsx | 208 + client/src/components/saved-species.tsx | 82 + client/src/components/search-form.tsx | 154 + client/src/components/species-tabs.tsx | 322 + client/src/components/ui/accordion.tsx | 56 + client/src/components/ui/alert-dialog.tsx | 139 + client/src/components/ui/alert.tsx | 59 + client/src/components/ui/aspect-ratio.tsx | 5 + client/src/components/ui/avatar.tsx | 48 + client/src/components/ui/badge.tsx | 36 + client/src/components/ui/breadcrumb.tsx | 115 + client/src/components/ui/button.tsx | 56 + client/src/components/ui/calendar.tsx | 64 + client/src/components/ui/card.tsx | 79 + client/src/components/ui/carousel.tsx | 260 + client/src/components/ui/chart.tsx | 363 + client/src/components/ui/checkbox.tsx | 28 + client/src/components/ui/collapsible.tsx | 9 + client/src/components/ui/command.tsx | 153 + client/src/components/ui/context-menu.tsx | 198 + client/src/components/ui/dialog.tsx | 120 + client/src/components/ui/drawer.tsx | 116 + client/src/components/ui/dropdown-menu.tsx | 198 + client/src/components/ui/form.tsx | 176 + client/src/components/ui/hover-card.tsx | 27 + client/src/components/ui/input-otp.tsx | 69 + client/src/components/ui/input.tsx | 25 + client/src/components/ui/label.tsx | 24 + client/src/components/ui/menubar.tsx | 234 + client/src/components/ui/navigation-menu.tsx | 128 + client/src/components/ui/pagination.tsx | 117 + client/src/components/ui/popover.tsx | 29 + client/src/components/ui/progress.tsx | 26 + client/src/components/ui/radio-group.tsx | 42 + client/src/components/ui/resizable.tsx | 43 + client/src/components/ui/scroll-area.tsx | 46 + client/src/components/ui/select.tsx | 158 + client/src/components/ui/separator.tsx | 29 + client/src/components/ui/sheet.tsx | 138 + client/src/components/ui/sidebar.tsx | 762 ++ client/src/components/ui/skeleton.tsx | 15 + client/src/components/ui/slider.tsx | 26 + client/src/components/ui/switch.tsx | 27 + client/src/components/ui/table.tsx | 117 + client/src/components/ui/tabs.tsx | 53 + client/src/components/ui/textarea.tsx | 24 + client/src/components/ui/toast.tsx | 127 + client/src/components/ui/toaster.tsx | 33 + client/src/components/ui/toggle-group.tsx | 59 + client/src/components/ui/toggle.tsx | 43 + client/src/components/ui/tooltip.tsx | 28 + client/src/hooks/use-mobile.tsx | 19 + client/src/hooks/use-toast.ts | 191 + client/src/index.css | 13 + client/src/lib/api.ts | 189 + client/src/lib/queryClient.ts | 57 + client/src/lib/utils.ts | 6 + client/src/main.tsx | 8 + client/src/pages/home.tsx | 201 + client/src/pages/not-found.tsx | 21 + drizzle.config.ts | 14 + package-lock.json | 8976 +++++++++++++++++ package.json | 104 + postcss.config.js | 6 + server/index.ts | 70 + server/routes.ts | 217 + server/storage.ts | 133 + server/vite.ts | 88 + shared/schema.ts | 66 + tailwind.config.ts | 90 + theme.json | 6 + tsconfig.json | 23 + vite.config.ts | 36 + 79 files changed, 16294 insertions(+) create mode 100644 .gitignore create mode 100644 .replit create mode 100644 client/index.html create mode 100644 client/src/App.tsx create mode 100644 client/src/components/authentication-panel.tsx create mode 100644 client/src/components/recent-searches.tsx create mode 100644 client/src/components/results-container.tsx create mode 100644 client/src/components/saved-species.tsx create mode 100644 client/src/components/search-form.tsx create mode 100644 client/src/components/species-tabs.tsx create mode 100644 client/src/components/ui/accordion.tsx create mode 100644 client/src/components/ui/alert-dialog.tsx create mode 100644 client/src/components/ui/alert.tsx create mode 100644 client/src/components/ui/aspect-ratio.tsx create mode 100644 client/src/components/ui/avatar.tsx create mode 100644 client/src/components/ui/badge.tsx create mode 100644 client/src/components/ui/breadcrumb.tsx create mode 100644 client/src/components/ui/button.tsx create mode 100644 client/src/components/ui/calendar.tsx create mode 100644 client/src/components/ui/card.tsx create mode 100644 client/src/components/ui/carousel.tsx create mode 100644 client/src/components/ui/chart.tsx create mode 100644 client/src/components/ui/checkbox.tsx create mode 100644 client/src/components/ui/collapsible.tsx create mode 100644 client/src/components/ui/command.tsx create mode 100644 client/src/components/ui/context-menu.tsx create mode 100644 client/src/components/ui/dialog.tsx create mode 100644 client/src/components/ui/drawer.tsx create mode 100644 client/src/components/ui/dropdown-menu.tsx create mode 100644 client/src/components/ui/form.tsx create mode 100644 client/src/components/ui/hover-card.tsx create mode 100644 client/src/components/ui/input-otp.tsx create mode 100644 client/src/components/ui/input.tsx create mode 100644 client/src/components/ui/label.tsx create mode 100644 client/src/components/ui/menubar.tsx create mode 100644 client/src/components/ui/navigation-menu.tsx create mode 100644 client/src/components/ui/pagination.tsx create mode 100644 client/src/components/ui/popover.tsx create mode 100644 client/src/components/ui/progress.tsx create mode 100644 client/src/components/ui/radio-group.tsx create mode 100644 client/src/components/ui/resizable.tsx create mode 100644 client/src/components/ui/scroll-area.tsx create mode 100644 client/src/components/ui/select.tsx create mode 100644 client/src/components/ui/separator.tsx create mode 100644 client/src/components/ui/sheet.tsx create mode 100644 client/src/components/ui/sidebar.tsx create mode 100644 client/src/components/ui/skeleton.tsx create mode 100644 client/src/components/ui/slider.tsx create mode 100644 client/src/components/ui/switch.tsx create mode 100644 client/src/components/ui/table.tsx create mode 100644 client/src/components/ui/tabs.tsx create mode 100644 client/src/components/ui/textarea.tsx create mode 100644 client/src/components/ui/toast.tsx create mode 100644 client/src/components/ui/toaster.tsx create mode 100644 client/src/components/ui/toggle-group.tsx create mode 100644 client/src/components/ui/toggle.tsx create mode 100644 client/src/components/ui/tooltip.tsx create mode 100644 client/src/hooks/use-mobile.tsx create mode 100644 client/src/hooks/use-toast.ts create mode 100644 client/src/index.css create mode 100644 client/src/lib/api.ts create mode 100644 client/src/lib/queryClient.ts create mode 100644 client/src/lib/utils.ts create mode 100644 client/src/main.tsx create mode 100644 client/src/pages/home.tsx create mode 100644 client/src/pages/not-found.tsx create mode 100644 drizzle.config.ts create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 server/index.ts create mode 100644 server/routes.ts create mode 100644 server/storage.ts create mode 100644 server/vite.ts create mode 100644 shared/schema.ts create mode 100644 tailwind.config.ts create mode 100644 theme.json create mode 100644 tsconfig.json create mode 100644 vite.config.ts diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f9ba7f8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +node_modules +dist +.DS_Store +server/public +vite.config.ts.* +*.tar.gz \ No newline at end of file diff --git a/.replit b/.replit new file mode 100644 index 0000000..66129d4 --- /dev/null +++ b/.replit @@ -0,0 +1,42 @@ +modules = ["nodejs-20", "bash", "web"] +run = "npm run dev" +hidden = [".config", ".git", "generated-icon.png", "node_modules", "dist"] + +[nix] +channel = "stable-24_05" + +[deployment] +deploymentTarget = "autoscale" +run = ["npm", "run", "start"] +build = ["npm", "run", "build"] + +[[ports]] +localPort = 5000 +externalPort = 80 + +[workflows] +runButton = "Project" + +[[workflows.workflow]] +name = "Project" +mode = "parallel" +author = "agent" + +[[workflows.workflow.tasks]] +task = "workflow.run" +args = "Start application" + +[[workflows.workflow]] +name = "Start application" +author = "agent" + +[workflows.workflow.metadata] +agentRequireRestartOnSave = false + +[[workflows.workflow.tasks]] +task = "packager.installForAll" + +[[workflows.workflow.tasks]] +task = "shell.exec" +args = "npm run dev" +waitForPort = 5000 diff --git a/client/index.html b/client/index.html new file mode 100644 index 0000000..ed27b80 --- /dev/null +++ b/client/index.html @@ -0,0 +1,11 @@ + + + + + + + +
+ + + \ No newline at end of file diff --git a/client/src/App.tsx b/client/src/App.tsx new file mode 100644 index 0000000..093b683 --- /dev/null +++ b/client/src/App.tsx @@ -0,0 +1,26 @@ +import { Switch, Route } from "wouter"; +import { queryClient } from "./lib/queryClient"; +import { QueryClientProvider } from "@tanstack/react-query"; +import { Toaster } from "@/components/ui/toaster"; +import NotFound from "@/pages/not-found"; +import Home from "@/pages/home"; + +function Router() { + return ( + + + + + ); +} + +function App() { + return ( + + + + + ); +} + +export default App; diff --git a/client/src/components/authentication-panel.tsx b/client/src/components/authentication-panel.tsx new file mode 100644 index 0000000..424ec70 --- /dev/null +++ b/client/src/components/authentication-panel.tsx @@ -0,0 +1,119 @@ +import { useState } from "react"; +import { useMutation } from "@tanstack/react-query"; +import { queryClient } from "@/lib/queryClient"; +import { apiClient } from "@/lib/api"; +import { useToast } from "@/hooks/use-toast"; +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; + +interface AuthenticationPanelProps { + token: string; + onSave: () => void; +} + +export default function AuthenticationPanel({ token, onSave }: AuthenticationPanelProps) { + const { toast } = useToast(); + const [apiToken, setApiToken] = useState(token || ""); + + const saveTokenMutation = useMutation({ + mutationFn: async (token: string) => { + return await apiClient.saveToken(token); + }, + onSuccess: (response) => { + if (response.success) { + queryClient.invalidateQueries({ queryKey: ['/api/token'] }); + toast({ + title: "Success", + description: "API token has been saved successfully", + }); + onSave(); + } else { + toast({ + title: "Error", + description: response.message || "Failed to save API token", + variant: "destructive", + }); + } + }, + onError: () => { + toast({ + title: "Error", + description: "Failed to save API token", + variant: "destructive", + }); + } + }); + + const handleSaveToken = () => { + if (!apiToken.trim()) { + toast({ + title: "Validation Error", + description: "Please enter an API token", + variant: "destructive", + }); + return; + } + + saveTokenMutation.mutate(apiToken); + }; + + const handleGetNewToken = () => { + window.open("https://api.speciesplus.net/", "_blank"); + }; + + return ( + + +

+ + + + API Authentication +

+
+ + setApiToken(e.target.value)} + /> +
+
+ + +
+
+ Your token is stored securely and is only sent to the CITES+ API. +
+
+
+ ); +} diff --git a/client/src/components/recent-searches.tsx b/client/src/components/recent-searches.tsx new file mode 100644 index 0000000..168a8cb --- /dev/null +++ b/client/src/components/recent-searches.tsx @@ -0,0 +1,63 @@ +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Search } from "@shared/schema"; + +interface RecentSearchesProps { + recentSearches: Search[]; + onSelectSearch: (query: string) => void; +} + +export default function RecentSearches({ recentSearches, onSelectSearch }: RecentSearchesProps) { + return ( + + +

+ + + + + Recent Searches +

+ +
+ {recentSearches.length > 0 ? ( + recentSearches.map((item) => ( +
+ +
+ )) + ) : ( +

No recent searches

+ )} +
+
+
+ ); +} diff --git a/client/src/components/results-container.tsx b/client/src/components/results-container.tsx new file mode 100644 index 0000000..78c5eaa --- /dev/null +++ b/client/src/components/results-container.tsx @@ -0,0 +1,208 @@ +import { useState, useEffect } from "react"; +import { useMutation, useQuery } from "@tanstack/react-query"; +import { apiClient, CITES_API_ENDPOINTS, CitesLegislation, Distribution } from "@/lib/api"; +import { useToast } from "@/hooks/use-toast"; +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import SpeciesTabs from "@/components/species-tabs"; + +interface ResultsContainerProps { + currentSpecies: any; + onSpeciesSaved: () => void; +} + +export default function ResultsContainer({ + currentSpecies, + onSpeciesSaved +}: ResultsContainerProps) { + const { toast } = useToast(); + const [apiResponse, setApiResponse] = useState(""); + + // Load species details when a species is selected + const { data: citesLegislation, isLoading: isLoadingLegislation } = useQuery({ + queryKey: ['/api/species/details', currentSpecies?.id, 'cites_legislation'], + queryFn: async () => { + if (!currentSpecies?.id) return null; + const response = await apiClient.getSpeciesDetails( + currentSpecies.id, + CITES_API_ENDPOINTS.CITES_LEGISLATION + ); + return response.success ? response.data : null; + }, + enabled: !!currentSpecies?.id, + }); + + const { data: distributions, isLoading: isLoadingDistributions } = useQuery({ + queryKey: ['/api/species/details', currentSpecies?.id, 'distributions'], + queryFn: async () => { + if (!currentSpecies?.id) return null; + const response = await apiClient.getSpeciesDetails( + currentSpecies.id, + CITES_API_ENDPOINTS.DISTRIBUTIONS + ); + return response.success ? response.data : null; + }, + enabled: !!currentSpecies?.id, + }); + + const { data: references, isLoading: isLoadingReferences } = useQuery({ + queryKey: ['/api/species/details', currentSpecies?.id, 'references'], + queryFn: async () => { + if (!currentSpecies?.id) return null; + const response = await apiClient.getSpeciesDetails( + currentSpecies.id, + CITES_API_ENDPOINTS.REFERENCES + ); + return response.success ? response.data : null; + }, + enabled: !!currentSpecies?.id, + }); + + const saveSpeciesMutation = useMutation({ + mutationFn: async () => { + if (!currentSpecies) return null; + + // Prepare species data for saving + const speciesData = { + scientificName: currentSpecies.full_name, + commonName: currentSpecies.common_names?.[0]?.name || '', + rank: currentSpecies.rank, + kingdom: currentSpecies.taxonomy?.kingdom || '', + phylum: currentSpecies.taxonomy?.phylum || '', + class: currentSpecies.taxonomy?.class || '', + order: currentSpecies.taxonomy?.order || '', + family: currentSpecies.taxonomy?.family || '', + genus: currentSpecies.taxonomy?.genus || '', + citesListings: currentSpecies.cites_listings || [], + citesId: currentSpecies.id, + apiData: currentSpecies, + }; + + return await apiClient.saveSpecies(speciesData); + }, + onSuccess: (response) => { + if (response?.success) { + onSpeciesSaved(); + } else { + toast({ + title: "Error", + description: response?.message || "Failed to save species data", + variant: "destructive", + }); + } + }, + onError: () => { + toast({ + title: "Error", + description: "Failed to save species data", + variant: "destructive", + }); + } + }); + + // Update API response when currentSpecies changes + useEffect(() => { + if (currentSpecies) { + setApiResponse(JSON.stringify(currentSpecies, null, 2)); + } + }, [currentSpecies]); + + const handleSaveToDatabase = () => { + saveSpeciesMutation.mutate(); + }; + + const isLoading = isLoadingLegislation || isLoadingDistributions || isLoadingReferences || saveSpeciesMutation.isPending; + + // No species selected yet + if (!currentSpecies) { + return ( + + + + + + +

No Species Data Yet

+

Search for a species to view CITES information

+
+
+ ); + } + + return ( + + + {/* Species Header */} +
+
+
+

{currentSpecies.full_name}

+

+ {currentSpecies.common_names?.[0]?.name || 'No common name available'} +

+
+
+ + {currentSpecies.cites_listings?.[0]?.appendix + ? `CITES Appendix ${currentSpecies.cites_listings[0].appendix}` + : 'No CITES listing'} + +
+
+
+

+ {currentSpecies.taxonomy + ? `Class: ${currentSpecies.taxonomy.class} | Order: ${currentSpecies.taxonomy.order} | Family: ${currentSpecies.taxonomy.family}` + : 'No taxonomy information available'} +

+
+
+ + {/* Tabs Content */} + + + {/* Save Button */} +
+ +
+
+
+ ); +} diff --git a/client/src/components/saved-species.tsx b/client/src/components/saved-species.tsx new file mode 100644 index 0000000..9fd3c97 --- /dev/null +++ b/client/src/components/saved-species.tsx @@ -0,0 +1,82 @@ +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Species } from "@shared/schema"; +import { format } from "date-fns"; + +interface SavedSpeciesProps { + savedSpecies: Species[]; + onSelectSpecies: (species: any) => void; +} + +export default function SavedSpecies({ savedSpecies, onSelectSpecies }: SavedSpeciesProps) { + const handleViewDetails = (species: Species) => { + onSelectSpecies(species.apiData); + }; + + return ( + + +

+ + + + + + Saved Species +

+ +
+ {savedSpecies.length > 0 ? ( + savedSpecies.map((species) => ( +
+
+
+
+

{species.scientificName}

+

{species.commonName || 'No common name'}

+
+ {species.citesListings && ( + + {Array.isArray(species.citesListings) && species.citesListings[0]?.appendix + ? `Appendix ${species.citesListings[0].appendix}` + : 'No listing'} + + )} +
+
+ + Saved on: {species.searchedAt ? format(new Date(species.searchedAt), 'yyyy-MM-dd') : 'Unknown'} + + +
+
+
+ )) + ) : ( +
+

No species saved to database yet

+
+ )} +
+
+
+ ); +} diff --git a/client/src/components/search-form.tsx b/client/src/components/search-form.tsx new file mode 100644 index 0000000..d81ac89 --- /dev/null +++ b/client/src/components/search-form.tsx @@ -0,0 +1,154 @@ +import { useState } from "react"; +import { useMutation } from "@tanstack/react-query"; +import { apiClient } from "@/lib/api"; +import { useToast } from "@/hooks/use-toast"; +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; + +interface SearchFormProps { + token: string | null; + onSpeciesFound: (species: any) => void; +} + +export default function SearchForm({ token, onSpeciesFound }: SearchFormProps) { + const { toast } = useToast(); + const [searchQuery, setSearchQuery] = useState(""); + const [responseFormat, setResponseFormat] = useState<"json" | "xml">("json"); + + const searchMutation = useMutation({ + mutationFn: async ({ query, format }: { query: string, format: "json" | "xml" }) => { + return await apiClient.searchSpecies(query, format); + }, + onSuccess: (response) => { + if (response.success && response.data?.taxon_concepts?.length) { + onSpeciesFound(response.data.taxon_concepts[0]); + toast({ + title: "Success", + description: "Species information retrieved successfully", + }); + } else { + toast({ + title: "No results", + description: "No species found matching your search criteria", + variant: "destructive", + }); + } + }, + onError: (error: any) => { + toast({ + title: "Error", + description: error.message || "Failed to search for species", + variant: "destructive", + }); + } + }); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + if (!searchQuery.trim()) { + toast({ + title: "Validation Error", + description: "Please enter a species name to search", + variant: "destructive", + }); + return; + } + + if (!token) { + toast({ + title: "API Token Required", + description: "Please set your CITES+ API token first", + variant: "destructive", + }); + return; + } + + searchMutation.mutate({ query: searchQuery, format: responseFormat }); + }; + + return ( + + +

+ + + + + Species Search +

+
+
+ + setSearchQuery(e.target.value)} + required + /> +

+ Example: Panthera leo, Tiger, Elephas maximus +

+
+
+ + setResponseFormat(value as "json" | "xml")} + > +
+ + +
+
+ + +
+
+
+ +
+
+
+ ); +} diff --git a/client/src/components/species-tabs.tsx b/client/src/components/species-tabs.tsx new file mode 100644 index 0000000..597f959 --- /dev/null +++ b/client/src/components/species-tabs.tsx @@ -0,0 +1,322 @@ +import { useState, useEffect } from "react"; +import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; +import { Button } from "@/components/ui/button"; +import { Skeleton } from "@/components/ui/skeleton"; +import { useToast } from "@/hooks/use-toast"; + +interface SpeciesTabsProps { + species: any; + citesLegislation: any; + distributions: any; + references: any; + apiResponse: string; + isLoading: boolean; +} + +export default function SpeciesTabs({ + species, + citesLegislation, + distributions, + references, + apiResponse, + isLoading +}: SpeciesTabsProps) { + const { toast } = useToast(); + const [activeTab, setActiveTab] = useState("overview"); + + // Handle copy API response to clipboard + const handleCopyResponse = async () => { + try { + await navigator.clipboard.writeText(apiResponse); + toast({ + title: "Copied", + description: "API response copied to clipboard", + }); + } catch (err) { + toast({ + title: "Error", + description: "Failed to copy API response", + variant: "destructive", + }); + } + }; + + if (isLoading) { + return ( +
+ + +
+ ); + } + + return ( + + + Overview + CITES Legislation + Distribution + References + API Response + + + {/* Overview Tab */} + +
+
+

CITES Status

+ {species.cites_listings && species.cites_listings.length > 0 ? ( + <> +

+ Listed in CITES Appendix {species.cites_listings[0].appendix} + since {new Date(species.cites_listings[0].effective_at).toLocaleDateString()} +

+

+ {species.cites_listings[0].appendix === 'I' + ? 'All commercial international trade is prohibited.' + : species.cites_listings[0].appendix === 'II' + ? 'International trade is regulated and requires permits.' + : 'International trade is regulated within countries that have requested monitoring assistance.'} +

+ + ) : ( +

No CITES listing information available.

+ )} +
+
+

Taxonomic Information

+

Rank: {species.rank || 'Unknown'}

+

Author: {species.author_year || 'Unknown'}

+
+
+
+

Species Information

+

+ {species.full_name} {species.common_names?.[0] ? `(${species.common_names[0].name})` : ''} is + a species of {species.taxonomy?.family?.toLowerCase() || 'organism'}. +

+
+ {species.taxonomy?.kingdom && ( + + {species.taxonomy.kingdom} + + )} + {species.taxonomy?.class && ( + + {species.taxonomy.class} + + )} + {species.taxonomy?.order && ( + + {species.taxonomy.order} + + )} + {species.taxonomy?.family && ( + + {species.taxonomy.family} + + )} +
+
+
+ + {/* CITES Legislation Tab */} + +
+

Appendix Listings

+
+ + + + + + + + + + {citesLegislation?.cites_listings && citesLegislation.cites_listings.length > 0 ? ( + citesLegislation.cites_listings.map((listing: any, index: number) => ( + + + + + + )) + ) : ( + + + + )} + +
AppendixEffective FromNotes
{listing.appendix} + {new Date(listing.effective_at).toLocaleDateString()} + {listing.annotation || 'None'}
No listing information available
+
+
+ +
+

CITES Quotas

+
+ + + + + + + + + + + {citesLegislation?.cites_quotas && citesLegislation.cites_quotas.length > 0 ? ( + citesLegislation.cites_quotas.map((quota: any, index: number) => ( + + + + + + + )) + ) : ( + + + + )} + +
YearQuotaPublication DateNotes
{quota.year}{quota.quota} + {quota.publication_date ? new Date(quota.publication_date).toLocaleDateString() : 'N/A'} + {quota.notes || 'None'}
No quota information available
+
+
+ +
+

CITES Suspensions

+
+ + + + + + + + + + + {citesLegislation?.cites_suspensions && citesLegislation.cites_suspensions.length > 0 ? ( + citesLegislation.cites_suspensions.map((suspension: any, index: number) => ( + + + + + + + )) + ) : ( + + + + )} + +
Start DateEnd DateApplies toNotes
+ {suspension.start_date ? new Date(suspension.start_date).toLocaleDateString() : 'N/A'} + + {suspension.end_date ? new Date(suspension.end_date).toLocaleDateString() : 'Ongoing'} + {suspension.applies_to || 'All'}{suspension.notes || 'None'}
No suspension information available
+
+
+
+ + {/* Distribution Tab */} + +
+

Geographic Range

+
+ + + + + + + + + + {distributions?.distributions && distributions.distributions.length > 0 ? ( + distributions.distributions.map((distribution: any, index: number) => ( + + + + + + )) + ) : ( + + + + )} + +
Country/TerritoryStatusReferences
{distribution.name} + {distribution.tags && distribution.tags.length > 0 + ? distribution.tags.join(', ') + : 'Native'} + + {distribution.references && distribution.references.length > 0 + ? distribution.references.map((ref: any) => ref.citation || 'Unnamed reference').join('; ') + : 'No references available'} +
No distribution information available
+
+
+
+ + {/* References Tab */} + +
+

Standard References

+
    + {references?.references && references.references.length > 0 ? ( + references.references.map((ref: any, index: number) => ( +
  • + {ref.citation || `${ref.author || 'Unknown'} (${ref.year || 'n.d.'}). ${ref.title || 'Untitled'}.`} +
  • + )) + ) : ( +
  • No reference information available
  • + )} +
+
+
+ + {/* API Response Tab */} + +
+
+

Raw API Response

+
+ +
+
+
+
{apiResponse}
+
+
+
+
+ ); +} diff --git a/client/src/components/ui/accordion.tsx b/client/src/components/ui/accordion.tsx new file mode 100644 index 0000000..e6a723d --- /dev/null +++ b/client/src/components/ui/accordion.tsx @@ -0,0 +1,56 @@ +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+
+)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/client/src/components/ui/alert-dialog.tsx b/client/src/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..8722561 --- /dev/null +++ b/client/src/components/ui/alert-dialog.tsx @@ -0,0 +1,139 @@ +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/client/src/components/ui/alert.tsx b/client/src/components/ui/alert.tsx new file mode 100644 index 0000000..41fa7e0 --- /dev/null +++ b/client/src/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/client/src/components/ui/aspect-ratio.tsx b/client/src/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..c4abbf3 --- /dev/null +++ b/client/src/components/ui/aspect-ratio.tsx @@ -0,0 +1,5 @@ +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/client/src/components/ui/avatar.tsx b/client/src/components/ui/avatar.tsx new file mode 100644 index 0000000..991f56e --- /dev/null +++ b/client/src/components/ui/avatar.tsx @@ -0,0 +1,48 @@ +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/client/src/components/ui/badge.tsx b/client/src/components/ui/badge.tsx new file mode 100644 index 0000000..f000e3e --- /dev/null +++ b/client/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/client/src/components/ui/breadcrumb.tsx b/client/src/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..60e6c96 --- /dev/null +++ b/client/src/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>