quietlight/skraak.app - Change ZO62AO2GDHIMVT2KFXCG6MOL3LPGM6QSSQ2MXXG33E6HO6YSE6IAC

my small change to clusters.tsx

Created by AEj8dahVWy718uSSFPe9VSRJ5qX5G8pC2zvFzJJ8yzBd on July 12, 2025

ZO62AO2GDHIMVT2KFXCG6MOL3LPGM6QSSQ2MXXG33E6HO6YSE6IAC

Dependencies

In channels

main

Change contents

Replacement in src/components/Clusters.tsx at line 5 [5.1]

∅:D[4.9648] → [5.114:206]

B:BD[5.114] → [5.114:206]

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table";

[4.9648]

[4.9649]

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "./ui/table";

Replacement in src/components/Clusters.tsx at line 26 [5.1]
B:BD[5.792] → [6.3518:3564]
```
const Clusters: React.FC<ClustersProps> = ({ 
```
[5.792]
[4.9738]
```
const Clusters: React.FC<ClustersProps> = ({
```
Replacement in src/components/Clusters.tsx at line 33 [5.1]
B:BD[4.9785] → [4.9785:9813]
```
  canCreateClusters = false
```
[4.9785]
[6.3644]
```
  canCreateClusters = false,
```

Replacement in src/components/Clusters.tsx at line 35 [5.1]

∅:D[6.3652] → [5.883:969]

B:BD[5.883] → [5.883:969]

  const { isAuthenticated, isLoading: authLoading, getAccessToken } = useKindeAuth();

[6.3652]

[5.969]

  const {
    isAuthenticated,
    isLoading: authLoading,
    getAccessToken,
  } = useKindeAuth();

Replacement in src/components/Clusters.tsx at line 48 [5.1]
B:BD[4.10149] → [4.10149:10152]
```
  
```
[4.10149]
[4.10152]

Replacement in src/components/Clusters.tsx at line 51 [5.1]

B:BD[4.10213] → [4.10213:10268]

B:BD[4.10268] → [7.11435:11459]

    name: '',
    description: '',
    timezoneId: '',
    sampleRate: '8000',

[4.10213]

[7.11459]

    name: "",
    description: "",
    timezoneId: "",
    sampleRate: "8000",

Replacement in src/components/Clusters.tsx at line 56 [5.1]
B:BD[7.11491] → [7.11491:11523]
```
    recordS: '',
    sleepS: ''
```
[7.11491]
[4.10291]
```
    recordS: "",
    sleepS: "",
```

Replacement in src/components/Clusters.tsx at line 90 [5.1]

B:BD[5.1892] → [5.1892:1956]

        const data = await response.json() as ClustersResponse;

[5.1892]

[5.1956]

        const data = (await response.json()) as ClustersResponse;

Replacement in src/components/Clusters.tsx at line 98 [5.1]

B:BD[5.2131] → [5.2131:2225]

        const errorMessage = err instanceof Error ? err.message : "Failed to fetch clusters";

[5.2131]

[5.2225]

        const errorMessage =
          err instanceof Error ? err.message : "Failed to fetch clusters";

Replacement in src/components/Clusters.tsx at line 113 [5.1]
B:BD[4.10384] → [4.10384:10389]
```
    
```
[4.10384]
[4.10389]
Replacement in src/components/Clusters.tsx at line 115 [5.1]
B:BD[4.10423] → [4.10423:10428]
```
    
```
[4.10423]
[4.10428]
Replacement in src/components/Clusters.tsx at line 118 [5.1]
B:BD[4.10478] → [4.10478:10483]
```
    
```
[4.10478]
[4.10483]
Replacement in src/components/Clusters.tsx at line 121 [5.1]
B:BD[4.10543] → [4.10543:10550]
```
      
```
[4.10543]
[4.10550]

Replacement in src/components/Clusters.tsx at line 132 [5.1]

B:BD[7.11825] → [7.11825:11908]

        if (formData.hasRecordingPattern && formData.recordS && formData.sleepS) {

[7.11825]

[7.11908]

        if (
          formData.hasRecordingPattern &&
          formData.recordS &&
          formData.sleepS
        ) {

Replacement in src/components/Clusters.tsx at line 139 [5.1]

B:BD[7.12002] → [7.12002:12048]

            sleepS: parseInt(formData.sleepS)

[7.12002]

[7.12048]

            sleepS: parseInt(formData.sleepS),

Replacement in src/components/Clusters.tsx at line 149 [5.1]

B:BD[4.10750] → [4.10750:10804]

            "Authorization": `Bearer ${accessToken}`,

[4.10750]

[4.10804]

            Authorization: `Bearer ${accessToken}`,

Replacement in src/components/Clusters.tsx at line 157 [5.1]

B:BD[4.11200] → [4.11200:11288]

          throw new Error(errorData.error || `HTTP error! Status: ${response.status}`);

[4.11200]

[4.11288]

          throw new Error(
            errorData.error || `HTTP error! Status: ${response.status}`,
          );

Replacement in src/components/Clusters.tsx at line 163 [5.1]
B:BD[4.11363] → [4.11363:11372]
```
        
```
[4.11363]
[4.11372]

Replacement in src/components/Clusters.tsx at line 165 [5.1]

B:BD[4.11414] → [4.11414:11545]

        setClusters(prev => prev.map(cluster => 
          cluster.id === updatedCluster.id ? updatedCluster : cluster
        ));

[4.11414]

[4.11545]

        setClusters((prev) =>
          prev.map((cluster) =>
            cluster.id === updatedCluster.id ? updatedCluster : cluster,
          ),
        );

Replacement in src/components/Clusters.tsx at line 173 [5.1]
B:BD[4.11621] → [4.11621:11630]
```
        
```
[4.11621]
[7.12271]

Replacement in src/components/Clusters.tsx at line 185 [5.1]

B:BD[7.12629] → [7.12629:12712]

        if (formData.hasRecordingPattern && formData.recordS && formData.sleepS) {

[7.12629]

[7.12712]

        if (
          formData.hasRecordingPattern &&
          formData.recordS &&
          formData.sleepS
        ) {

Replacement in src/components/Clusters.tsx at line 192 [5.1]

B:BD[7.12806] → [7.12806:12852]

            sleepS: parseInt(formData.sleepS)

[7.12806]

[7.12852]

            sleepS: parseInt(formData.sleepS),

Replacement in src/components/Clusters.tsx at line 195 [5.1]
B:BD[7.12875] → [7.12875:12884]
```
        
```
[7.12875]
[4.11630]

Replacement in src/components/Clusters.tsx at line 199 [5.1]

B:BD[4.11733] → [4.11733:11787]

            "Authorization": `Bearer ${accessToken}`,

[4.11733]

[4.11787]

            Authorization: `Bearer ${accessToken}`,

Replacement in src/components/Clusters.tsx at line 207 [5.1]

B:BD[4.12246] → [4.12246:12334]

          throw new Error(errorData.error || `HTTP error! Status: ${response.status}`);

[4.12246]

[4.12334]

          throw new Error(
            errorData.error || `HTTP error! Status: ${response.status}`,
          );

Replacement in src/components/Clusters.tsx at line 213 [5.1]
B:BD[4.12405] → [4.12405:12414]
```
        
```
[4.12405]
[4.12414]

Replacement in src/components/Clusters.tsx at line 215 [5.1]

B:BD[4.12457] → [4.12457:12509]

        setClusters(prev => [newCluster, ...prev]);

[4.12457]

[4.12509]

        setClusters((prev) => [newCluster, ...prev]);

Replacement in src/components/Clusters.tsx at line 217 [5.1]
B:BD[4.12517] → [4.12517:12524]
```
      
```
[4.12517]
[4.12524]
Deletion in src/components/Clusters.tsx at line 220 [5.1]
B:BD[4.12586] → [4.12586:12593]
```
      
```

Replacement in src/components/Clusters.tsx at line 221 [5.1]

B:BD[4.12613] → [4.12613:12811]

      setFormError(err instanceof Error ? err.message : `Failed to ${isEditMode ? 'update' : 'create'} cluster`);
      console.error(`Error ${isEditMode ? 'updating' : 'creating'} cluster:`, err);

[4.12613]

[4.12811]

      setFormError(
        err instanceof Error
          ? err.message
          : `Failed to ${isEditMode ? "update" : "create"} cluster`,
      );
      console.error(
        `Error ${isEditMode ? "updating" : "creating"} cluster:`,
        err,
      );

Replacement in src/components/Clusters.tsx at line 235 [5.1]

B:BD[4.12868] → [7.12933:13021]

∅:D[7.13021] → [4.12946:12973]

B:BD[4.12946] → [4.12946:12973]

  const handleFormChange = (field: keyof typeof formData, value: string | boolean) => {
    setFormData(prev => ({

[4.12868]

[4.12973]

  const handleFormChange = (
    field: keyof typeof formData,
    value: string | boolean,
  ) => {
    setFormData((prev) => ({

Replacement in src/components/Clusters.tsx at line 241 [5.1]

B:BD[4.12988] → [7.13022:13085]

      [field]: field === 'hasRecordingPattern' ? value : value

[4.12988]

[4.13009]

      [field]: field === "hasRecordingPattern" ? value : value,

Replacement in src/components/Clusters.tsx at line 251 [5.1]

B:BD[4.13180] → [4.13180:13241]

B:BD[4.13241] → [7.13086:13112]

      name: '',
      description: '',
      timezoneId: '',
      sampleRate: '8000',

[4.13180]

[7.13112]

      name: "",
      description: "",
      timezoneId: "",
      sampleRate: "8000",

Replacement in src/components/Clusters.tsx at line 256 [5.1]
B:BD[7.13146] → [7.13146:13182]
```
      recordS: '',
      sleepS: ''
```
[7.13146]
[4.13266]
```
      recordS: "",
      sleepS: "",
```

Replacement in src/components/Clusters.tsx at line 265 [5.1]

B:BD[4.13387] → [4.13387:13448]

B:BD[4.13448] → [7.13183:13209]

      name: '',
      description: '',
      timezoneId: '',
      sampleRate: '8000',

[4.13387]

[7.13209]

      name: "",
      description: "",
      timezoneId: "",
      sampleRate: "8000",

Replacement in src/components/Clusters.tsx at line 270 [5.1]
B:BD[7.13243] → [7.13243:13279]
```
      recordS: '',
      sleepS: ''
```
[7.13243]
[4.13473]
```
      recordS: "",
      sleepS: "",
```

Replacement in src/components/Clusters.tsx at line 281 [5.1]

B:BD[4.13663] → [4.13663:13753]

      description: cluster.description || '',
      timezoneId: cluster.timezoneId || '',

[4.13663]

[7.13280]

      description: cluster.description || "",
      timezoneId: cluster.timezoneId || "",

Replacement in src/components/Clusters.tsx at line 285 [5.1]

B:BD[7.13381] → [7.13381:13556]

      recordS: cluster.recordingPattern ? String(cluster.recordingPattern.recordS) : '',
      sleepS: cluster.recordingPattern ? String(cluster.recordingPattern.sleepS) : ''

[7.13381]

[4.13798]

      recordS: cluster.recordingPattern
        ? String(cluster.recordingPattern.recordS)
        : "",
      sleepS: cluster.recordingPattern
        ? String(cluster.recordingPattern.sleepS)
        : "",

Replacement in src/components/Clusters.tsx at line 297 [5.1]

B:BD[4.13929] → [4.13929:13934]

B:BD[4.13934] → [7.13557:13721]

    
    const confirmDelete = window.confirm(`Are you sure you want to delete "${cluster.name}"? This will soft delete the cluster and remove any recording pattern.`);

[4.13929]

[4.14060]


    const confirmDelete = window.confirm(
      `Are you sure you want to delete "${cluster.name}"? This will soft delete the cluster and remove any recording pattern.`,
    );

Replacement in src/components/Clusters.tsx at line 302 [5.1]
B:BD[4.14092] → [4.14092:14097]
```
    
```
[4.14092]
[4.14097]
Replacement in src/components/Clusters.tsx at line 305 [5.1]
B:BD[4.14157] → [4.14157:14164]
```
      
```
[4.14157]
[4.14164]

Replacement in src/components/Clusters.tsx at line 309 [5.1]

B:BD[4.14274] → [4.14274:14326]

          "Authorization": `Bearer ${accessToken}`,

[4.14274]

[4.14372]

          Authorization: `Bearer ${accessToken}`,

Replacement in src/components/Clusters.tsx at line 315 [5.1]

B:BD[4.14536] → [4.14536:14622]

        throw new Error(errorData.error || `HTTP error! Status: ${response.status}`);

[4.14536]

[4.14622]

        throw new Error(
          errorData.error || `HTTP error! Status: ${response.status}`,
        );

Replacement in src/components/Clusters.tsx at line 321 [5.1]

∅:D[7.13791] → [4.14687:14760]

B:BD[4.14687] → [4.14687:14760]

      setClusters(prev => prev.filter(c => c.id !== cluster.id));

[7.13791]

[4.14760]

      setClusters((prev) => prev.filter((c) => c.id !== cluster.id));

Replacement in src/components/Clusters.tsx at line 331 [5.1]

B:BD[4.14971] → [4.14971:15036]

B:BD[4.15036] → [4.15036:15163]

      {isAuthenticated && !authLoading && canCreateClusters && (
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-lg font-semibold">Clusters</h2>

[4.14971]

[4.15163]

      <div className="flex justify-between items-center mb-4">
        <h2 className="text-lg font-semibold">Clusters</h2>
        {isAuthenticated && !authLoading && canCreateClusters && (

Replacement in src/components/Clusters.tsx at line 343 [5.1]
B:BD[4.15416] → [4.15416:15440]
B:BD[4.15440] → [4.15440:15447]
```
        </div>
      )}
      
```
[4.15416]
[4.15447]
```
        )}
      </div>
```

Insertion in src/components/Clusters.tsx at line 347 [5.1]

[4.15510]

[5.2880]

        {loading && (
          <div className="py-4 text-center text-gray-500">
            Loading clusters...
          </div>
        )}

Replacement in src/components/Clusters.tsx at line 353 [5.1]

B:BD[5.2881] → [5.2881:2974]

      {loading && <div className="py-4 text-center text-gray-500">Loading clusters...</div>}

[5.2881]

[5.2974]

        {error && (
          <div className="p-4 bg-red-50 text-red-700 rounded-md mb-4">
            <p className="font-medium">Error loading clusters</p>
            <p className="text-sm mt-1">{error}</p>
          </div>
        )}

Replacement in src/components/Clusters.tsx at line 360 [5.1]

B:BD[5.2975] → [5.2975:3436]

B:BD[5.3436] → [8.2579:2681]

∅:D[8.2681] → [5.3535:3724]

B:BD[5.3535] → [5.3535:3724]

B:BD[5.3724] → [9.754:850]

∅:D[9.850] → [5.3724:3821]

B:BD[5.3724] → [5.3724:3821]

B:BD[5.3821] → [4.15511:15686]

∅:D[4.15686] → [5.3821:3898]

B:BD[5.3821] → [5.3821:3898]

B:BD[5.3898] → [3.107:150]

B:BD[3.150] → [3.150:227]

B:BD[3.227] → [3.227:252]

∅:D[3.252] → [10.25290:25352]

B:BD[5.3941] → [10.25290:25352]

B:BD[10.25352] → [4.15687:15761]

∅:D[4.15761] → [10.25536:25554]

B:BD[10.25536] → [10.25536:25554]

B:BD[10.25554] → [4.15762:15911]

B:BD[4.15911] → [3.253:290]

B:BD[3.290] → [3.290:357]

B:BD[3.357] → [3.357:516]

∅:D[3.516] → [4.16008:17382]

B:BD[4.16008] → [4.16008:17382]

∅:D[4.17382] → [5.4394:4723]

B:BD[5.4394] → [5.4394:4723]

      {error && (
        <div className="p-4 bg-red-50 text-red-700 rounded-md mb-4">
          <p className="font-medium">Error loading clusters</p>
          <p className="text-sm mt-1">{error}</p>
        </div>
      )}
      {!loading && !error && clusters.length > 0 && (
        <div className="w-full overflow-visible">
          <Table>
            <TableHeader className="bg-muted">
              <TableRow className="border-b-2 border-primary/20">
                <TableHead className="w-[180px] py-3 font-bold text-sm uppercase">Cluster</TableHead>
                <TableHead className="py-3 font-bold text-sm uppercase">Description</TableHead>
                <TableHead className="py-3 font-bold text-sm uppercase">Timezone</TableHead>
                <TableHead className="py-3 font-bold text-sm uppercase">Sample Rate</TableHead>
                <TableHead className="py-3 font-bold text-sm uppercase">Record:Sleep</TableHead>
                {canCreateClusters && (
                  <TableHead className="w-[120px] py-3 font-bold text-sm uppercase text-center">Actions</TableHead>
                )}
              </TableRow>
            </TableHeader>
            <TableBody>
              {clusters.map((cluster) => {
                console.log('Rendering cluster:', cluster.id, cluster.name);
                return (
                <TableRow 
                  key={cluster.id}
                  className={onClusterSelect ? "hover:bg-primary/5" : ""}
                >
                  <TableCell 
                    className={`font-medium whitespace-normal break-words ${onClusterSelect ? 'cursor-pointer' : ''}`}
                    onClick={() => {
                      console.log('Cluster clicked:', cluster.id);
                      if (onClusterSelect) {
                        onClusterSelect(cluster.id, cluster.name);
                      }
                    }}
                  >
                    {cluster.name}
                  </TableCell>
                  <TableCell 
                    className={`whitespace-normal break-words ${onClusterSelect ? 'cursor-pointer' : ''}`}
                    onClick={() => onClusterSelect && onClusterSelect(cluster.id, cluster.name)}
                  >
                    {cluster.description || "—"}
                  </TableCell>
                  <TableCell 
                    className={`whitespace-normal break-words ${onClusterSelect ? 'cursor-pointer' : ''}`}
                    onClick={() => onClusterSelect && onClusterSelect(cluster.id, cluster.name)}
                  >
                    {cluster.timezoneId || "—"}
                  </TableCell>
                  <TableCell 
                    className={`whitespace-normal break-words ${onClusterSelect ? 'cursor-pointer' : ''}`}
                    onClick={() => onClusterSelect && onClusterSelect(cluster.id, cluster.name)}
                  >
                    {cluster.sampleRate ? `${cluster.sampleRate} Hz` : "—"}
                  </TableCell>
                  <TableCell 
                    className={`whitespace-normal break-words ${onClusterSelect ? 'cursor-pointer' : ''}`}
                    onClick={() => onClusterSelect && onClusterSelect(cluster.id, cluster.name)}
                  >
                    {cluster.recordingPattern
                      ? (
                        `${Math.round(cluster.recordingPattern.recordS)}:${Math.round(cluster.recordingPattern.sleepS)}`
                      )
                      : (
                        "—"
                      )}
                  </TableCell>

[5.2975]

[4.17383]

        {!loading && !error && clusters.length > 0 && (
          <div className="w-full overflow-visible">
            <Table>
              <TableHeader className="bg-muted">
                <TableRow className="border-b-2 border-primary/20">
                  <TableHead className="w-[180px] py-3 font-bold text-sm uppercase">
                    Cluster
                  </TableHead>
                  <TableHead className="py-3 font-bold text-sm uppercase">
                    Description
                  </TableHead>
                  <TableHead className="py-3 font-bold text-sm uppercase">
                    Timezone
                  </TableHead>
                  <TableHead className="py-3 font-bold text-sm uppercase">
                    Sample Rate
                  </TableHead>
                  <TableHead className="py-3 font-bold text-sm uppercase">
                    Record:Sleep
                  </TableHead>

Replacement in src/components/Clusters.tsx at line 381 [5.1]

B:BD[4.17425] → [4.17425:17547]

B:BD[4.17547] → [4.17547:17932]

B:BD[4.17932] → [4.17932:17958]

B:BD[4.17958] → [4.17958:18047]

B:BD[4.18047] → [4.18047:18172]

B:BD[4.18172] → [2.1531:1615]

∅:D[2.1615] → [4.18230:18484]

B:BD[4.18230] → [4.18230:18484]

B:BD[4.18484] → [4.18484:18510]

B:BD[4.18510] → [4.18510:18601]

B:BD[4.18601] → [4.18601:18663]

                    <TableCell className="text-center">
                      <div className="flex justify-center gap-2">
                        <Button
                          onClick={(e) => {
                            e.stopPropagation();
                            handleEditCluster(cluster);
                          }}
                          variant="ghost"
                          size="sm"
                          className="p-1 h-8 w-8"
                          title="Edit cluster"
                        >
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button
                          onClick={(e) => {
                            e.stopPropagation();
                            void handleDeleteCluster(cluster).catch(console.error);
                          }}
                          variant="ghost"
                          size="sm"
                          className="p-1 h-8 w-8 text-red-600 hover:text-red-700 hover:bg-red-50"
                          title="Delete cluster"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>

[4.17425]

[4.18663]

                    <TableHead className="w-[120px] py-3 font-bold text-sm uppercase text-center">
                      Actions
                    </TableHead>

Replacement in src/components/Clusters.tsx at line 386 [5.1]

B:BD[5.4751] → [3.517:554]

∅:D[3.554] → [5.4769:4837]

B:BD[5.4769] → [5.4769:4837]

                );
              })}
            </TableBody>
          </Table>
        </div>
      )}

[5.4751]

[5.4837]

              </TableHeader>
              <TableBody>
                {clusters.map((cluster) => {
                  console.log("Rendering cluster:", cluster.id, cluster.name);
                  return (
                    <TableRow
                      key={cluster.id}
                      className={onClusterSelect ? "hover:bg-primary/5" : ""}
                    >
                      <TableCell
                        className={`font-medium whitespace-normal break-words ${onClusterSelect ? "cursor-pointer" : ""}`}
                        onClick={() => {
                          console.log("Cluster clicked:", cluster.id);
                          if (onClusterSelect) {
                            onClusterSelect(cluster.id, cluster.name);
                          }
                        }}
                      >
                        {cluster.name}
                      </TableCell>
                      <TableCell
                        className={`whitespace-normal break-words ${onClusterSelect ? "cursor-pointer" : ""}`}
                        onClick={() =>
                          onClusterSelect &&
                          onClusterSelect(cluster.id, cluster.name)
                        }
                      >
                        {cluster.description || "—"}
                      </TableCell>
                      <TableCell
                        className={`whitespace-normal break-words ${onClusterSelect ? "cursor-pointer" : ""}`}
                        onClick={() =>
                          onClusterSelect &&
                          onClusterSelect(cluster.id, cluster.name)
                        }
                      >
                        {cluster.timezoneId || "—"}
                      </TableCell>
                      <TableCell
                        className={`whitespace-normal break-words ${onClusterSelect ? "cursor-pointer" : ""}`}
                        onClick={() =>
                          onClusterSelect &&
                          onClusterSelect(cluster.id, cluster.name)
                        }
                      >
                        {cluster.sampleRate ? `${cluster.sampleRate} Hz` : "—"}
                      </TableCell>
                      <TableCell
                        className={`whitespace-normal break-words ${onClusterSelect ? "cursor-pointer" : ""}`}
                        onClick={() =>
                          onClusterSelect &&
                          onClusterSelect(cluster.id, cluster.name)
                        }
                      >
                        {cluster.recordingPattern
                          ? `${Math.round(cluster.recordingPattern.recordS)}:${Math.round(cluster.recordingPattern.sleepS)}`
                          : "—"}
                      </TableCell>
                      {canCreateClusters && (
                        <TableCell className="text-center">
                          <div className="flex justify-center gap-2">
                            <Button
                              onClick={(e) => {
                                e.stopPropagation();
                                handleEditCluster(cluster);
                              }}
                              variant="ghost"
                              size="sm"
                              className="p-1 h-8 w-8"
                              title="Edit cluster"
                            >
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button
                              onClick={(e) => {
                                e.stopPropagation();
                                void handleDeleteCluster(cluster).catch(
                                  console.error,
                                );
                              }}
                              variant="ghost"
                              size="sm"
                              className="p-1 h-8 w-8 text-red-600 hover:text-red-700 hover:bg-red-50"
                              title="Delete cluster"
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      )}
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </div>
        )}

Replacement in src/components/Clusters.tsx at line 484 [5.1]

B:BD[5.4838] → [5.4838:5065]

      {!loading && !error && clusters.length === 0 && (
        <div className="p-4 bg-yellow-50 text-yellow-800 rounded-md">
          <p className="font-medium">No clusters found for this location</p>
        </div>
      )}

[5.4838]

[4.18685]

        {!loading && !error && clusters.length === 0 && (
          <div className="p-4 bg-yellow-50 text-yellow-800 rounded-md">
            <p className="font-medium">No clusters found for this location</p>
          </div>
        )}

Replacement in src/components/Clusters.tsx at line 498 [5.1]

B:BD[4.19078] → [4.19078:19149]

                  {isEditMode ? 'Edit Cluster' : 'Create New Cluster'}

[4.19078]

[4.19149]

                  {isEditMode ? "Edit Cluster" : "Create New Cluster"}

Replacement in src/components/Clusters.tsx at line 502 [5.1]

B:BD[4.19266] → [4.19266:19368]

                    Think of a cluster as data from one SD card, a recording session for one recorder

[4.19266]

[4.19368]

                    Think of a cluster as data from one SD card, a recording
                    session for one recorder

Replacement in src/components/Clusters.tsx at line 523 [5.1]

B:BD[4.19881] → [2.1616:1724]

            <form onSubmit={(e) => void handleSubmitCluster(e).catch(console.error)} className="space-y-4">

[4.19881]

[4.19953]

            <form
              onSubmit={(e) => void handleSubmitCluster(e).catch(console.error)}
              className="space-y-4"
            >

Replacement in src/components/Clusters.tsx at line 528 [5.1]

B:BD[4.19973] → [4.19973:20069]

                <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">

[4.19973]

[4.20069]

                <label
                  htmlFor="name"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >

Replacement in src/components/Clusters.tsx at line 540 [5.1]

B:BD[4.20301] → [4.20301:20378]

                  onChange={(e) => handleFormChange('name', e.target.value)}

[4.20301]

[4.20378]

                  onChange={(e) => handleFormChange("name", e.target.value)}

Replacement in src/components/Clusters.tsx at line 547 [5.1]

B:BD[4.20648] → [4.20648:20751]

                <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">

[4.20648]

[4.20751]

                <label
                  htmlFor="description"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >

Replacement in src/components/Clusters.tsx at line 557 [5.1]

B:BD[4.20948] → [4.20948:21032]

                  onChange={(e) => handleFormChange('description', e.target.value)}

[4.20948]

[4.21032]

                  onChange={(e) =>
                    handleFormChange("description", e.target.value)
                  }

Replacement in src/components/Clusters.tsx at line 567 [5.1]

B:BD[4.21339] → [4.21339:21441]

                <label htmlFor="timezoneId" className="block text-sm font-medium text-gray-700 mb-1">

[4.21339]

[4.21441]

                <label
                  htmlFor="timezoneId"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >

Replacement in src/components/Clusters.tsx at line 578 [5.1]

B:BD[4.21662] → [4.21662:21745]

                  onChange={(e) => handleFormChange('timezoneId', e.target.value)}

[4.21662]

[4.21745]

                  onChange={(e) =>
                    handleFormChange("timezoneId", e.target.value)
                  }

Replacement in src/components/Clusters.tsx at line 587 [5.1]

B:BD[4.22018] → [4.22018:22120]

                <label htmlFor="sampleRate" className="block text-sm font-medium text-gray-700 mb-1">

[4.22018]

[4.22120]

                <label
                  htmlFor="sampleRate"
                  className="block text-sm font-medium text-gray-700 mb-1"
                >

Replacement in src/components/Clusters.tsx at line 600 [5.1]

B:BD[4.22401] → [4.22401:22484]

                  onChange={(e) => handleFormChange('sampleRate', e.target.value)}

[4.22401]

[4.22484]

                  onChange={(e) =>
                    handleFormChange("sampleRate", e.target.value)
                  }

Replacement in src/components/Clusters.tsx at line 615 [5.1]

B:BD[7.14130] → [7.14130:14226]

                    onChange={(e) => handleFormChange('hasRecordingPattern', e.target.checked)}

[7.14130]

[7.14226]

                    onChange={(e) =>
                      handleFormChange("hasRecordingPattern", e.target.checked)
                    }

Replacement in src/components/Clusters.tsx at line 620 [5.1]

B:BD[7.14284] → [7.14284:14386]

                  <label htmlFor="hasRecordingPattern" className="text-sm font-medium text-gray-700">

[7.14284]

[7.14386]

                  <label
                    htmlFor="hasRecordingPattern"
                    className="text-sm font-medium text-gray-700"
                  >

Replacement in src/components/Clusters.tsx at line 627 [5.1]
B:BD[7.14481] → [7.14481:14498]
```
                
```
[7.14481]
[7.14498]

Replacement in src/components/Clusters.tsx at line 631 [5.1]

B:BD[7.14639] → [7.14639:14744]

                      <label htmlFor="recordS" className="block text-sm font-medium text-gray-700 mb-1">

[7.14639]

[7.14744]

                      <label
                        htmlFor="recordS"
                        className="block text-sm font-medium text-gray-700 mb-1"
                      >

Replacement in src/components/Clusters.tsx at line 644 [5.1]

B:BD[7.15103] → [7.15103:15189]

                        onChange={(e) => handleFormChange('recordS', e.target.value)}

[7.15103]

[7.15189]

                        onChange={(e) =>
                          handleFormChange("recordS", e.target.value)
                        }

Replacement in src/components/Clusters.tsx at line 652 [5.1]

B:BD[7.15473] → [7.15473:15577]

                      <label htmlFor="sleepS" className="block text-sm font-medium text-gray-700 mb-1">

[7.15473]

[7.15577]

                      <label
                        htmlFor="sleepS"
                        className="block text-sm font-medium text-gray-700 mb-1"
                      >

Replacement in src/components/Clusters.tsx at line 665 [5.1]

B:BD[7.15933] → [7.15933:16018]

                        onChange={(e) => handleFormChange('sleepS', e.target.value)}

[7.15933]

[7.16018]

                        onChange={(e) =>
                          handleFormChange("sleepS", e.target.value)
                        }

Replacement in src/components/Clusters.tsx at line 674 [5.1]
B:BD[7.16318] → [7.16318:16335]
```
                
```
[7.16318]
[7.16335]

Replacement in src/components/Clusters.tsx at line 677 [5.1]

B:BD[7.16452] → [7.16452:16561]

                    Some recorders pause while saving data. Enter the record and sleep durations in seconds.

[7.16452]

[7.16561]

                    Some recorders pause while saving data. Enter the record and
                    sleep durations in seconds.

Replacement in src/components/Clusters.tsx at line 695 [5.1]

B:BD[7.16633] → [7.16633:16715]

                    formLoading || 
                    !formData.name.trim() ||

[7.16633]

[7.16715]

                    formLoading ||
                    !formData.name.trim() ||

Replacement in src/components/Clusters.tsx at line 698 [5.1]

B:BD[7.16759] → [7.16759:16853]

                    (formData.hasRecordingPattern && (!formData.recordS || !formData.sleepS))

[7.16759]

[7.16853]

                    (formData.hasRecordingPattern &&
                      (!formData.recordS || !formData.sleepS))

Replacement in src/components/Clusters.tsx at line 702 [5.1]

B:BD[4.23195] → [4.23195:23388]

                  {formLoading 
                    ? (isEditMode ? "Updating..." : "Creating...") 
                    : (isEditMode ? "Update Cluster" : "Create Cluster")
                  }

[4.23195]

[4.23388]

                  {formLoading
                    ? isEditMode
                      ? "Updating..."
                      : "Creating..."
                    : isEditMode
                      ? "Update Cluster"
                      : "Create Cluster"}