Retrive and render files

app/dashboard/page.tsx

@@ -309,25 +309,79 @@ export default function DashboardPage() {
                     Fichiers
                   </CardTitle>
                 </CardHeader>
-                {/* <CardContent>
+                <CardContent>
-                  {selectedFolder.files && selectedFolder.files.length > 0 ? (
+                  {(() => {
+                    const files = selectedFolder?.attachedFiles;
+                    if (!files) return false;
+                    
+                    if (typeof files === 'object') {
+                      return Object.keys(files).length > 0;
+                    }
+                    return false;
+                  })() ? (
                     <div className="space-y-3">
-                      {selectedFolder.files.map((file, index) => (
+                      {Object.entries(selectedFolder.attachedFiles || {}).map(([key, file]: [string, any]) => {
-                        <div key={index} className="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
+                        
+                        return (
+                          <div key={key} className="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
                             <div className="flex items-center space-x-3 min-w-0">
-                            <FileText className="h-5 w-5 text-gray-400 flex-shrink-0" />
+                              <div className="flex-shrink-0">
+                                {(file instanceof Map ? file.get('type') : file?.type)?.startsWith('image/') ? (
+                                <svg className="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+                                  <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
+                                </svg>
+                              ) : (file instanceof Map ? file.get('type') : file?.type) === 'application/pdf' ? (
+                                <svg className="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
+                                  <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
+                                </svg>
+                              ) : (
+                                <svg className="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
+                                  <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd" />
+                                </svg>
+                              )}
+                            </div>
                             <div className="min-w-0">
-                              <p className="text-sm font-medium text-gray-100 truncate">{file.name || 'Fichier'}</p>
+                              <p className="text-sm font-medium text-gray-100 truncate">
-                              <p className="text-xs text-gray-400">{formatBytes(file.size || 0)}</p>
+                                {(file instanceof Map ? file.get('name') : file?.name) || 'Fichier'}
+                              </p>
+                              <p className="text-xs text-gray-400">
+                                {(() => {
+                                  const size = file instanceof Map ? file.get('size') : file?.size;
+                                  return size ? formatBytes(size) : 'Taille inconnue';
+                                })()}
+                              </p>
                             </div>
                           </div>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                              const name = file instanceof Map ? file.get('name') : file?.name;
+                              const type = file instanceof Map ? file.get('type') : file?.type;
+                              const base64Data = file instanceof Map ? file.get('base64Data') : file?.base64Data;
+                              
+                              if (base64Data && type && name) {
+                                const link = document.createElement('a');
+                                link.href = `data:${type};base64,${base64Data}`;
+                                link.download = name;
+                                document.body.appendChild(link);
+                                link.click();
+                                document.body.removeChild(link);
+                              }
+                            }}
+                            className="text-blue-400 hover:text-blue-300 hover:bg-gray-600"
+                            disabled={!(file instanceof Map ? file.get('base64Data') : file?.base64Data)}
+                          >
+                            <UploadCloud className="h-4 w-4" />
+                          </Button>
                         </div>
-                      ))}
+                        );
+                      })}
                     </div>
                   ) : (
                     <p className="text-gray-500">Aucun fichier dans ce dossier.</p>
                   )}
-                </CardContent> */}
+                </CardContent>
               </Card>
             </div>
           </>