[ui] Add hierarchy to sector filter (#250)

app/src/app/api/search/export/route.ts

@@ -18,7 +18,7 @@ export async function GET(request: Request) {
 
   searchParams.set(
     "select",
-    "tax_ident, name, unit_type, primary_activity_category_id, physical_region_id, employees, physical_country_iso_2, sector_code, sector_name, legal_form_code, legal_form_name"
+    "tax_ident, name, unit_type, primary_activity_category_id, physical_region_id, employees, turnover, physical_country_iso_2, sector_code, sector_name, legal_form_code, legal_form_name"
   );
 
   const statisticalUnitsResponse = await getStatisticalUnits(searchParams);

app/src/app/dashboard/page.tsx

@@ -13,13 +13,13 @@ import { StatisticalVariableCountCard } from "@/app/dashboard/statistical-variab
 import { Database, Gauge } from "lucide-react";
 
 export const metadata: Metadata = {
-  title: "StatBus | Dashboard",
+  title: "Statbus | Dashboard",
 };
 
 export default async function Dashboard() {
   return (
     <main className="mx-auto flex max-w-5xl flex-col px-2 py-8 md:py-24 w-full space-y-8 lg:space-y-12">
-      <h1 className="text-center text-2xl">StatBus Status Dashboard</h1>
+      <h1 className="text-center text-2xl">Statbus Status Dashboard</h1>
 
       <DashboardSection
         title="Data Metrics"

app/src/app/getting-started/layout.tsx

@@ -8,11 +8,11 @@ export default function GettingStartedLayout({
   readonly progress: React.ReactNode;
 }) {
   return (
-    <main className="w-full mx-auto max-w-screen-xl px-2 py-8 md:py-24 grid xl:grid-cols-12 gap-8">
-      <aside className="p-6 col-span-12 xl:col-span-4 bg-ssb-light">
+    <main className="w-full mx-auto max-w-screen-xl px-2 py-8 md:py-24 grid lg:grid-cols-12 gap-8">
+      <aside className="p-6 col-span-12 lg:col-span-4 bg-ssb-light">
         {progress}
       </aside>
-      <div className="flex-1 col-span-12 xl:col-span-8">
+      <div className="flex-1 col-span-12 lg:col-span-8">
         <div className="max-w-2xl mx-auto">{children}</div>
       </div>
     </main>

app/src/app/getting-started/page.tsx

@@ -6,7 +6,7 @@ export default async function GettingStartedPage() {
     <div className="space-y-6 text-center">
       <h1 className="text-center text-2xl">Welcome</h1>
       <p>
-        In this onboarding guide we will try to help you get going with StatBus.
+        In this onboarding guide we will try to help you get going with Statbus.
         We will assist you in selecting an activity standard and you will get to
         upload your first region data set.
       </p>

app/src/app/getting-started/summary/page.tsx

@@ -30,16 +30,16 @@ export default async function OnboardingCompletedPage() {
       <h1 className="text-center text-2xl">Summary</h1>
       <p className="leading-loose">
         The following steps needs to be complete in order to have a fully
-        functional StatBus. If you have not completed some of the steps, you can
+        functional Statbus. If you have not completed some of the steps, you can
         click the links to complete the steps.
       </p>
 
       <div className="space-y-6">
         <SummaryBlock
           success={!!settings?.[0]?.activity_category_standard}
-          successText={`You have configured StatBus to use the activity category standard ${settings?.[0]?.activity_category_standard?.name}.`}
+          successText={`You have configured Statbus to use the activity category standard ${settings?.[0]?.activity_category_standard?.name}.`}
           failureText={
-            "You have not configured StatBus to use an activity category standard"
+            "You have not configured Statbus to use an activity category standard"
           }
           failureLink={"/getting-started/activity-standard"}
         />
@@ -71,7 +71,7 @@ export default async function OnboardingCompletedPage() {
       numberOfLegalUnits ? (
         <div className="text-center">
           <Link className="underline" href="/">
-            Start using StatBus
+            Start using Statbus
           </Link>
         </div>
       ) : null}

app/src/app/layout.tsx

@@ -13,7 +13,7 @@ import TimeContextProvider from "@/app/time-context-provider";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "StatBus",
+  title: "Statbus",
   description: "Simple To Use, Simple To Understand, Simply useful!",
 };
 

app/src/app/login/page.tsx

@@ -18,7 +18,7 @@ export default function LoginPage() {
       <div className="sm:mx-auto sm:w-full sm:max-w-sm">
         <Image
           src={logo}
-          alt="StatBus Logo"
+          alt="Statbus Logo"
           width={32}
           height={32}
           className="mx-auto h-10 w-auto"

app/src/app/page.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 import Dashboard from "@/app/dashboard/page";
 
 export const metadata: Metadata = {
-  title: "StatBus | Home",
+  title: "Statbus | Home",
 };
 
 export default async function Home() {

app/src/app/reports/page.tsx

@@ -6,7 +6,7 @@ import { DrillDown } from "@/app/reports/types/drill-down";
 import { createServerLogger } from "@/lib/server-logger";
 
 export const metadata: Metadata = {
-  title: "StatBus | Reports",
+  title: "Statbus | Reports",
 };
 
 export default async function ReportsPage() {
@@ -28,7 +28,7 @@ export default async function ReportsPage() {
 
   return (
     <main className="mx-auto flex w-full max-w-5xl flex-col px-2 py-8 md:py-24">
-      <h1 className="mb-3 text-center text-2xl">StatBus Data Drilldown</h1>
+      <h1 className="mb-3 text-center text-2xl">Statbus Data Drilldown</h1>
       <p className="mb-12 text-center">
         Gain data insights by drilling through the bar charts below
       </p>

app/src/app/search/filters/sector/sector-filter.tsx

@@ -7,17 +7,15 @@ interface IProps {
 
 export default async function SectorFilter({ urlSearchParam }: IProps) {
   const client = createClient();
-  const sectors = await client
-    .from("sector_used")
-    .select()
-    .not("code", "is", null);
+  const sectors = await client.from("sector_used").select();
 
   return (
     <SectorOptions
       options={
-        sectors.data?.map(({ code, name }) => ({
-          label: `${code} ${name}`,
-          value: code,
+        sectors.data?.map(({ code, path, name }) => ({
+          label: code ? `${code} ${name}` : `${name}`,
+          value: path as string,
+          humanReadableValue: code ? `${code} ${name}` : `${name}`,
         })) ?? []
       }
       selected={urlSearchParam ? urlSearchParam.split(",") : []}

app/src/app/search/filters/sector/sector-options.tsx

@@ -17,19 +17,21 @@ export default function SectorOptions({
       values: { [SECTOR]: selected = [] },
     },
   } = useSearchContext();
-
+  const buildQuery = (values: (string | null)[]) => {
+    const path = values[0];
+    if (path) return `cd.${path}`;
+    if (path === null) return "is.null";
+    return null;
+  };
   const toggle = useCallback(
     ({ value }: SearchFilterOption) => {
-      const next = selected.includes(value)
-        ? selected.filter((v) => v !== value)
-        : [...selected, value];
-
+      const values = selected.includes(value) ? [] : [value];
       dispatch({
         type: "set_query",
         payload: {
           name: SECTOR,
-          query: next.length ? `in.(${next.join(",")})` : null,
-          values: next,
+          query: buildQuery(values),
+          values,
         },
       });
     },
@@ -53,7 +55,7 @@ export default function SectorOptions({
         type: "set_query",
         payload: {
           name: SECTOR,
-          query: `in.(${initialSelected.join(",")})`,
+          query: buildQuery(initialSelected),
           values: initialSelected,
         },
       });

app/src/app/search/filters/url-search-params.ts

@@ -4,5 +4,5 @@ export const UNIT_TYPE = "unit_type";
 export const INVALID_CODES = "invalid_codes";
 export const REGION = "physical_region_path";
 export const LEGAL_FORM = "legal_form_code";
-export const SECTOR = "sector_code";
+export const SECTOR = "sector_path";
 export const ACTIVITY_CATEGORY_PATH = "primary_activity_category_path";

app/src/app/search/page.tsx

@@ -10,7 +10,7 @@ import { CartProvider } from "@/app/search/cart-provider";
 import { createClient } from "@/lib/supabase/server";
 
 export const metadata: Metadata = {
-  title: "StatBus | Search statistical units",
+  title: "Statbus | Search statistical units",
 };
 
 export default async function SearchPage({

app/src/components/command-palette/command-palette.tsx

@@ -42,7 +42,11 @@ export function CommandPalette() {
     };
 
     const keydown = (e: KeyboardEvent) => {
-      if (e.key === "k" && (e.metaKey || e.ctrlKey) && e.shiftKey) {
+      if (
+        (e.key === "k" || e.key === "K") &&
+        (e.metaKey || e.ctrlKey) &&
+        e.shiftKey
+      ) {
         e.preventDefault();
         open();
       }
@@ -147,6 +151,13 @@ export function CommandPalette() {
             <Upload className="mr-2 h-4 w-4" />
             <span>Upload Legal Units</span>
           </CommandItem>
+          <CommandItem
+            onSelect={() => navigate("/getting-started/upload-establishments")}
+            value="Upload Establishments"
+          >
+            <Upload className="mr-2 h-4 w-4" />
+            <span>Upload Establishments</span>
+          </CommandItem>
           <CommandItem onSelect={() => navigate("/profile")} value="Profile">
             <User className="mr-2 h-4 w-4" />
             <span>Profile</span>

app/src/components/navbar.tsx

@@ -13,7 +13,7 @@ export function NavbarSkeleton() {
   return (
     <header className="bg-ssb-dark text-white">
       <div className="mx-auto flex max-w-screen-xl items-center justify-between gap-4 p-2 lg:px-4">
-        <Image src={logo} alt="StatBus Logo" className="h-10 w-10" />
+        <Image src={logo} alt="Statbus Logo" className="h-10 w-10" />
       </div>
     </header>
   );
@@ -26,7 +26,7 @@ export default async function Navbar() {
     <header className="bg-ssb-dark text-white">
       <div className="mx-auto flex max-w-screen-xl items-center justify-between gap-4 p-2 lg:px-4">
         <a href="/" className="flex items-center space-x-3 rtl:space-x-reverse">
-          <Image src={logo} alt="StatBus Logo" className="h-10 w-10" />
+          <Image src={logo} alt="Statbus Logo" className="h-10 w-10" />
         </a>
         {session.data.session?.user && (
           <div className="flex-1 space-x-3 flex items-center justify-end">